Question

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

ParentVariation.vue
VariationInfo.vue
Childvariation.vue

我正在从子组件MarkedFilled发出variation-info事件，并在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>

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

但是每次调用此事件时，仅第一个父元素的fill属性会更改。我想更改clicked元素的属性。

我已经尝试了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))
    }
  }
}

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

1 个答案: