Question

我有一个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路数据绑定？

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/

避免在Vue.js中对数据赋值进行双向数据绑定

1 个答案: