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

Question

我有一个 vue 实例：

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

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

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

我的页面加载后，我想 select 第一项作为起始项：

vue.selectedItem = vue.items[0]

我的 html 中有一个输入字段绑定到 object

的标题 属性

<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]);

并且 object 之间仍然存在绑定。 我怎样才能只为 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/