[Vuejs]-Pass value from child component to parent method AND index

by

3👍

✅

You can create object with index and title and pass it to parent:

Vue.component('Child', {
  template: `
    <div class="">
      <input v-model="title" />
      <button @click="titleChange">change</button>
      {{title}}
      {{index}}
    </div>
  `,
  props:['index'],
  data() {
    return {
      title: ''
    }
  },
  methods: {
    titleChange() {
      this.$emit('title-change', {idx: this.index, title: this.title})
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      components: ['child', 'child', 'child']
    }
  },
  methods: {
    setTitle(val) {
      console.log(val)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <component v-for="(component, index) in components" :key="index" 
:is="component" :index="index" @title-change="setTitle" />
</div>
👤Nikola Pavicevic

Leave a comment