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实例上的copy方法)。当我运行时，一切似乎都很正常，但是当我更改输入时，它会更新所有已复制组件的属性。

我该怎么做才能让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)
}