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?

Answer 1

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/