Vuejs在for循环内的嵌套组件上绑定自定义事件

Question

我正在使用三个单文件组件。

• ParentVariation.vue
• VariationInfo.vue
• Childvariation.vue

我从子组件variation-info 发出MarkedFilled 事件，并在ParentVariation 上捕获该事件。这是ParentVariation.vue的内容：

<template>
    <section class="parentVariation">
        <label :for="'key-'+row.id">Key</label>

        <select :name="'key-'+row.id" :id="'key-'+row.id" class="select2"></select>

        <label :for="'value-'+row.id">Value</label>
        <input :name="'value-'+row.id" :id="'value-'+row.id">

        <label :for="'quantity-'+row.id">quantity</label>
        <input :name="'quantity-'+row.id" :id="'quantity-'+row.id">

        <variation-info :filled="row.filled" @markedFilled="row.filled='true'" :key="row.id"></variation-info>

        <button @click="addChild" type="button" class="btn btn-link btn-sm btn-fw">
            <i class="mdi mdi-table-column-plus-after"></i>
            Add Child
        </button>

        <button @click="popChild" type="button" class="btn btn-link text-danger btn-sm btn-fw">
            <i class="mdi mdi-table-column-remove"></i>
            Drop Child
        </button>

        <br>

        <div v-if="row.child.length > 0">
            <child-variation v-for="child in row.child" :childIndex="child.id" :parentIndex="row.id" :key="child.id"></child-variation>
        </div>
    </section>
</template>

<script>
    export default {

        props: [ 'row' ],

        methods: {

            addChild() {
                this.row.child.push({ id:this.row.child.length, filled:'' })
            },

            popChild() {
                this.row.child.pop()
            },

        }

    }
</script>

在主 Vue 实例上。我有这个：

data: function() {
   return {
       parents: [{ id:0, child: [], filled:'' }]
   }
},

我已经像这样初始化了ParentVariation：

<parent-variation v-for="parent in parents" :row="parent" :key="parent.id"></parent-variation>

我正在尝试实现此功能：当从子组件 (variation-info) 调用 MarkedFilled 事件时。父组件 (parent-variation) 将捕获并更新主 vue 实例上数据父级的填充属性。

但每次调用此事件时，只会更改第一个父元素的填充属性。我想改变点击元素的属性。

我已经尝试解决这个问题 2 天了，感谢任何帮助。 我只是想了解为什么每次只调用第一个元素。

Answer 1

您可能想尝试将markedFilled 事件发送到父组件：

在ParentVariation.vue

<variation-info :filled="row.filled" @markedFilled="$emit('markedFilled')" :key="row.id">
</variation-info>

主要是

<parent-variation v-for="(parent, index) in parents" :row="parent" :key="parent.id" @markedFilled="changeFilled(index)">
</parent-variation>

export default {
  data: function() {
   return {
       parents: [{ id:0, child: [], filled:'' }]
   }
  },
  methods: {
    changeFilled(index) {
      this.parents[index].filled = true
      this.parents = JSON.parse(JSON.stringify(this.parents))
    }
  }
}