Edited: assigned object elements cannot be edited

Question

I've got a copy of the object using Object.assign function inside a method (thanks to @Chris advice) as below: (It could be quill-editor or any other text input field)

<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>

Case1. I'm not running the function - all works

Case2. I'm running the function once - and I can see the "something" text within the editor, I can edit it, but the output inside {{itemsCopy[0].text}} are not changing...

After I run the function - I noticed I cannot edit the object's text field (and also active variable)

Answer 1

Well, you make a copy of items and don't do anything with that copy, from what I see.