避免在 Vue.js 中对数据分配进行 2 路数据绑定

Question

我有一个 vue 实例：

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

我使用来自我的 phoenix 服务器的数据初始化项目，如下所示：

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

当我的页面加载完毕后，我想选择第一项作为起始项：

vue.selectedItem = vue.items[0]

我的 html 中有一个输入字段绑定到我的对象的标题属性

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

数据绑定工作正常，问题是 items[0] 正在与 selectedItem 一起更新，我不想要它。 我试过的：

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

仍然绑定，

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

仍然绑定，并且：

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

对象之间仍然存在绑定。 我怎样才能只为 selectedItem 获得 2 路数据绑定？

Answer 1

我在 jsfiddle 中复制了您的案例，并且 Object.assign 运行良好。

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/