javascript - 避免在 Vue.js 中的数据分配上使用 2 路数据绑定(bind)

Question

我有一个 vue 实例:

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

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

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

当我的页面加载后，我想选择第一个项目作为起始项目:

vue.selectedItem = vue.items[0]

我的 html 中有一个输入字段，它绑定(bind)到我的对象的 title 属性

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

数据绑定(bind)工作正常，问题是 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]);

对象之间仍然存在绑定(bind)。我如何获得仅针对 selectedItem 的 2 路数据绑定(bind)？

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/