已编辑:分配的对象元素无法在组件 javascript/vuejs 中编辑

Question

我在方法中使用 Object.assign 函数获得了对象的副本(感谢@Chris建议(，如下所示：(可以是quill-editor或任何其他文本输入字段(

<template>
  <div>
    <quill-editor
    v-model="itemsCopy[0].text"
    :options="editorOption"
    >
    </quill-editor> 
    {{itemsCopy[0].text}}
    <button @click="copyAndChange()"> </button>
  </div>
</template>

<script>

export default {
    data() {
        return {
            items: [
              {text: 'text1', active: true},
              {text: 'text1', active: true},
              {text: 'text1', active: true}
            ],
            itemsCopy [],
        }
    },
    methods: {
        function copyAndChange() {
          this.itemsCopy = this.items.slice();
          for (var i=0; i<this.itemsCopy.length; i++) {
            var obj = Object.assign({}, this.itemsCopy[i]);
            obj.text = "something";
            this.itemsCopy[i] = obj;  //replace the old obj with the new modified one.
            console.log('text from items: ' + this.items[i].text)
            console.log('text from itemsCopy: ' + this.itemsCopy[i].text)
          }
          return 0
        }
    }
}
</script>

案例1.我没有运行该功能 - 一切正常

案例2.我运行过一次函数 - 我可以在编辑器中看到"某些"文本，我可以编辑它，但{{itemsCopy[0].text}}内的输出没有改变......

运行函数后 - 我注意到我无法编辑对象的文本字段(以及活动变量(

Answer 1

好吧，你复制了items，从我所看到的情况来看，你没有对该副本做任何事情。