Avoid 2 way databinding on data assignment in Vue.js

Question

I have a vue instance:

    var vue = new Vue({
      el: '#vue-wrapper',
      data: {
        items: [],
        selectedItem: ''
    })

I initialize items with data coming from my phoenix server like this:

vue.items = <%= raw(@stories) %>

When my page has loaded, i want to select the first item as starting item:

vue.selectedItem = vue.items[0]

I have an input field in my html that is bind to title property of my object

<input type="text" v-model="selectedItem.title"></input>

Databinding works fine, problem is that items[0] is updating together with selectedItem, and i don't want it. What i've tried:

var x = vue.items[0];
vue.selectedItem = X;

still binding,

var x = <%= raw(@stories) %>
vue.items = x[0]
vue.selectedItem = x[0]

still binding, and:

vue.selectedItem = Object.assign({}, vue.items[0]);

and still there's binding between objects. How can i get 2 way databinding only for selectedItem?

Try vue.selectedItem = { ...vue.items[0] };, or vue.selectedItem = JSON.parse(JSON.stringify(vue.items[0])); or use something like lodash#cloneDeep, you need to clone the object, right now you have a reference to the original object. — Ricky Ruiz
– Ricky Ruiz, Commented Feb 16, 2018 at 20:15

Tomasz Kostuch · Accepted Answer · 2018-02-17 16:11:27Z

2

I reproduced your case in jsfiddle and Object.assign is working very well.

var vue = new Vue({
      el: '#vue-wrapper',
      data: {
          items: [{
            title: 'title-item'
          }],
          selectedItem: ''
      }
    })

    vue.selectedItem = Object.assign({}, vue.items[0])

https://jsfiddle.net/50wL7mdz/107302/

answered Feb 17, 2018 at 16:11

Tomasz Kostuch

2491 silver badge14 bronze badges

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

1 Comment

Razinar Over a year ago

I see. I've already tried it but the binding is still real. I need to check my code to see if i've made another binding somewhere else. Thank you Tomasz

Collectives™ on Stack Overflow

Avoid 2 way databinding on data assignment in Vue.js

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