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。我一次运行这个功能 - 我可以看到＆＃34;某些东西＆＃34;编辑器中的文本，我可以编辑它，但{{itemsCopy[0].text}}内的输出不会改变...

运行该功能后 - 我注意到我无法编辑对象的文本字段（以及活动变量）

Answer 1

好吧，你复制了items，并且从我看到的内容中不对该副本做任何事情。

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

1 个答案: