解决vuejs 创建数据后设置对象的属性实现不了双向绑定问题

Posted Blog - Liang Fengbo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决vuejs 创建数据后设置对象的属性实现不了双向绑定问题相关的知识,希望对你有一定的参考价值。

抛出踩坑:vue创建后的数据,自定义设置对象的属性,实现不了双向绑定

当业务场景,需要在请求接口数据新增自定义的属性

let foodList = [
  {title: ‘回锅肉‘, price: 99.0},
  {title: ‘油焖大虾‘, price: 199.0}
];

我们要做数量增加时候,后自定义添加数量属性quantity:


// 添加自定义属性数量quantity
foodList.forEach(item => {
  item.quantity = 0;
});

/**
 [
 { title: ‘回锅肉‘, price: 99, quantity: 0 },
 { title: ‘油焖大虾‘, price: 199, quantity: 0 }
 ]

 */

我们需要对数量增加的时候,quantity是实现不了双向绑定的,比如:

// 特殊菜数量添加
quantityAction(type, item) {
    // 加法
    if (type === ‘add‘) {
      item.quantity++
    } else {
      // 减法
      if (item.quantity > 0) {
        item.quantity--
      }
    }
}
// 几时quantity是在增减,实际页面是达不到双向绑定的

解决方法:

这时候需要用$set方法,设置对象的属性。

如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

vm.$set( target, key, value )

  • 参数:
  • {Object | Array} target
  • {string | number} key
  • {any} value
  • 返回值:设置的值。

用法:

foodList.forEach(item => {
  this.$set(item, ‘quantity‘, 0)
});

这样后面创建的属性就可以达到双向绑定了!

以上是关于解决vuejs 创建数据后设置对象的属性实现不了双向绑定问题的主要内容,如果未能解决你的问题,请参考以下文章

队列

JavaScripts数据结构 队列

VueJS:显示过滤后的数组列表

有道云笔记PC客户端登录后显示目录创建失败,笔记也看不了,该怎么解决

VueJs 指令双向绑定

VueJS构造器:new Vue({})