Vue推送后同时更新组件

Question

我正在Vue中构建一个表单

我有一个如下所示的组件：

<template>
    <transition name="preview-pane">
    <label>{{ option.group }}</label>
    <input type="text" class="form-control"
         :name="`group_name[${index}]`"
         v-on:input="option.group = $event.target.value"
         :value="option.group">
               
    <a ref="#" class="btn btn-primary float-right" @click="$emit('copy')" role="button">{{ __('Copy') }} </a>
    </transition>
</template>

<script>
    export default {
        props: {
            option: {
                group: ''
            },
            index: {}
        }
    }
</script>

我的Vue 实例如下：

var products = new Vue({
    el: '#products',
    data: {
        options: []
    },
    methods: {
        add() {
            this.options.push({
                group: ''
            })
        },
        copy(index) {
            this.options.push(this.options[index])
        }
    }
})

最后我的 html 如下所示

<product-option 
   v-for="(option, index) in options" 
   :key="index"
   :option="option"
   :index="index"
   @copy="copy(index)">
</product-option>

我有一个按钮，它基本上采用其中一个选项并再次按下它（vue 实例上的复制方法）。当我运行时一切似乎都很好，但是当我更改输入时，它会更新所有已复制组件的道具。

如何让 vue 理解每个组件应该单独工作？

Answer 1

如果有人遇到同样的问题，我会这样解决：

copy(index) {
    var object = this.options[index]
    var newObject = {}
    for (const property in object) {
        newObject[property] = object[property]
    }
    this.options.push(newObject)
}