简体   繁体   中英

VueJS - Pass data (array) from child to parent component with v-model

I try to emit data (array) from child to parent component with v-model but when the parent component created, my console.log doesn't work. I wouldn't work with Vuex cause of I'm beginner.

Here my child component , this component have nested child:

<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>

Here my parent child :

<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 child component
      }
    },
  }
</script>

Thank you,

Just change

@phaselist:selected="onChangeChild"

to

@selected="onChangeChild"

on the father

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM