分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 01:57责任编辑:熊小新关键词:jsvuejs

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

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

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

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

// 添加自定义属性数量quantityfoodList.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 创建数据后设置对象的属性实现不了双向绑定问题

原文地址:https://www.cnblogs.com/liangfengbo/p/9117724.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved