已编辑：无法在组件 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 并且不要对那个副本做任何事情，据我所见。