Edited: assigned object elements cannot be edited in component javascript/vuejs

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)

see this example with your code.. (adapted) jsfiddle.net/tng9r8j3/99 — F.bernal
– F.bernal, Commented Feb 28, 2018 at 14:01

Markus · Accepted Answer · 2018-02-28 13:32:45Z

0

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

answered Feb 28, 2018 at 13:32

Markus

1,6362 gold badges14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gileneusz Over a year ago

yes, but If I'm trying to configure my editor v-model="items[0].text" it will output edited text into {{items[0].text}}, on new object it's now working. I don't know why..

Collectives™ on Stack Overflow

Edited: assigned object elements cannot be edited in component javascript/vuejs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related