I am facing an issue in emitting data (array) from a child component to a parent component using v-model. However, when the parent component is created, my console.log does not work. I am hesitant to work with Vuex as I am still a beginner.
Here is my child component, which has nested children:
<template>
<PhaseListItem
v-model="selectedPhase"
...
/>
</template>
<script>
import PhaseListItem from '@/components/phase/PhaseListItem'
export default {
name: 'PhaseList',
components: {
PhaseListItem
},
data () {
return {
data: ['item 1', 'item 2'],
selectedPhase: undefined,
}
},
watch: {
selectedPhase () {
this.$emit('phaselist:selected', this.data)
}
},
}
</script>
And here is my parent component:
<template>
<PhaseList
@phaselist:selected="onChangeChild"
/>
</template>
<script>
import PhaseList from '@/components/phase/PhaseList'
export default {
name: 'PhaseCreate',
components: {
PhaseList
},
methods: {
onChangeChild (value) {
console.log('emit', value) // I want to see my array from the child component
}
},
}
</script>
Thank you,