I have encountered a small issue with Vue emit. While I successfully used it about a year ago, in my current project, I am struggling to make it work. Despite spending several hours trying to find a solution, I am unable to receive the emitted value in the parent component.
children:
<template>
<v-text-field v-model="val" outlined></v-text-field>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component
export default class BasicInput extends Vue {
val: string = "";
@Emit()
inputValue(): any {
console.log("emit");
return this.val;
}
}
</script>
parent:
<template>
<v-card class="mx-auto mt-2 mb-6" max-width="60%" outlined>
<v-form>
<BasicInput label="voting title" v-on:input-value="inputValue" />
<BasicTextarea label="short description" />
<BasicTextarea label="description" />
<BasicDatepicker />
<AddMoreInput />
<v-btn @click="inputValue">Save</v-btn>
</v-form>
</v-card>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasicInput from "./subcomponents/BasicInput.vue";
import BasicTextarea from "./subcomponents/BasicTextarea.vue";
import BasicDatepicker from "./subcomponents/BasicDatepicker.vue";
import AddMoreInput from "./subcomponents/AddMoreInput.vue";
@Component({
components: {
BasicInput,
BasicTextarea,
BasicDatepicker,
AddMoreInput
}
})
export default class AddVoting extends Vue {
private inputValue(data: any) {
console.log("test", data);
}
}
</script>
In this scenario, I recall that the "data" parameter of the "inputValue" event in the parent component should be the emitter's value. However, it appears as a list of event parameters instead.
What could be causing this issue?