Vue two-way data binding issue

Question

My own vue component sends http request to receive array of objects, then I store the answer in data property, and it's fine. Now I want to bind this array to v-model, but when user will input something my array is changed too. I want to store the array for later and make it not editable, I just want to bind its value to v-model, not reference to my array. My target is to allow user to reset v-model value to array received from api. I hope you get the point and you will be able to help me.

<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
<button @click="addElement">New</button>

data() {
   return {
       myArray: [],
       array: []
   }
},
methods: {
   addElement() {
      myArray.push({id:1, name:'something'});
   },
   getData() {
      axios(...)
      .then(res => {
         this.array = response.data;
      });
   }
   setData() {
      this.myArray = this.array;
   }
}

Now if user will add new element to myArray it will be also inserted in array

Have you tried pass cloned array using array.map, array.filter or something similar? — Darius
– Darius, Commented Feb 27, 2020 at 17:25
I've updated post, now you can see the code, @Darius, yeah I've tried this, but got the same result. — user8715649
– user8715649, Commented Feb 27, 2020 at 19:41

Darius · Accepted Answer · 2020-02-27 20:04:49Z

2

Data must be cloned:

new Vue({
  template: '<div>List1:<ul><li v-for="i in array1" :key="i.id">{{i.name}}</li></ul>List2:<ul><li v-for="i in array2" :key="i.id">{{i.name}}</li></ul><button @click="add">Add</button></div>',
  data: {
    array1: [{id:1, name:'Item1'},{id:2, name:'Item2'}],
    array2: []
  },
  created() {
    // clone array
    this.array2 = this.array1.map(i => Object.assign({},i))
  },
  methods: {
    add() {
      this.array1.push({id:this.array1.length+1, name:'Item'+(this.array1.length+1)})
      this.array1[0].name = 'Item1/' + this.array1.length
    }
  }
}).$mount('div')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div></div>

If it is more complex array of objects, then must use some sort of deep-clone.

answered Feb 27, 2020 at 20:04

Darius

1,1802 gold badges8 silver badges18 bronze badges

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

1 Comment

user8715649 Over a year ago

I've tried with Object.create instead of Object.assign, that's the problem, thanks a lot!

Kenny Aires · Accepted Answer · 2020-02-27 20:46:09Z

1

I solved a similar issue using the JSON parse to make the to-be-copied-array loose dinamic relation with the array-to-be-created. Try the following:

data() {
   return {
       myArray: [],
       array: []
   }
},
methods: {
   addElement() {
      myArray.push({id:1, name:'something'});
   },
   getData() {
      axios(...)
      .then(res => {
         this.array = response.data;
      });
   }
   setData() {
      this.myArray = JSON.parse(JSON.stringify(this.array)); // Here goes the trick
   }
}

This way every change on v-model array by the user won't be reflected on myArray since the setData() is called at least once before the user interaton.

Hope it suits you well.

answered Feb 27, 2020 at 20:46

Kenny Aires

1,44814 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue two-way data binding issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related