javascript - 在Vue.js中避免对数据分配进行2种方式的数据绑定(bind)

我有一个vue实例：

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

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

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

页面加载完成后，我想选择第一项作为开始项：

vue.selectedItem = vue.items[0]

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

<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种方式的数据绑定？

最佳答案

我在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/

关于javascript - 在Vue.js中避免对数据分配进行2种方式的数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48832216/