请问如何更新整个vue.$data

ahdung
  • 205

我有一个对象代表一张单据

var bill={id:'aaa',store:'bbb'};

完了在new Vue时赋值给$data:

var vm = new Vue(el:'#billinfo', data: bill});

然后在html中呈现单据信息:

<div id='billinfo'>
  <p>单号:{{id}}</p>
  <p>店仓:{{store}}</p>
</div>

在页面的交互中,bill可能会变成另一张单据,而我不想挨个更新单据属性:

bill.id = 'xxx';
bill.store = 'yyy';

我想把bill整个替换掉,但改变bill的指向显然不行:

bill = {id:'xxx', store: 'yyy'};

这样也不行:

vm.$data = {id:'xxx', store: 'yyy'};

固然可以将bill作为$data的某个子属性来构造vm,例如:

var vm = new Vue({el:xx, data: {bill: bill}});

这样在bill更新时便可以像这样操作:

vm.bill = {id:'xxx', store: 'yyy'};

但问题是使用时就只能带上这个属性名来使用:

<p>单号:{{bill.id}}</p>
...

请问怎样才能让$data就是实体本身时,整个更新$data?又或者,即便实体属于$data的某个子属性,也能不带属性前缀来使用?

回复
阅读 9k
2 个回答

不能更新根data 可以遍历更新嘛

for (var prop in bill)
{             
    Vue.set(vm, prop, bill[prop] )
}

Vue.set( vm, data, {...bill})

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏