vue监听数组中某个属性,计算其他属性问题
今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题,刚开始代码如下
this.weekList1=r.data.roomProducts;
this.weekList1.map(item=>{
item.cus_price='';
item.cus_plaPrice='';
item.cus_addPrice='';
});
watch:{
weekList1:{ handler:function(newVal,oldval){
let self=this;
newVal.map(item=>{
if(this.hotelPriceRules.type=='0'){
item.cus_plaPrice=Number(item.cus_price)+Number((Math.ceil(self.hotelPriceRules.val)/100))*Number(item.cus_price);
item.cus_addPrice=Number(item.cus_plaPrice)- Number(item.cus_price)
}else if(this.hotelPriceRules.type=='1'){
var jianGeDate='';
var startTime=item.cus_time.split(',')[0];
var endTime=item.cus_time.split(',')[1];
jianGeDate=this.getDateDiff(startTime,endTime);
item.cus_plaPrice=Number(item.cus_price)+Number(jianGeDate)*Number(this.hotelPriceRules.val);
item.cus_addPrice=Number(item.cus_plaPrice)-Number(item.cus_price)
}
})
},
deep:true
},
}, 当你输入item.cus_price时监听的数组 watch weekList1方法并没有执行,因为在cus_price并没有加入到监听中,所以最简单的解决办法先整合好要监听的数组,再赋值
r.data.roomProducts.map(item=>{
item.cus_price='';
item.cus_plaPrice='';
item.cus_addPrice='';
});
this.weekList1=r.data.roomProducts;
vue监听数组中某个属性,计算其他属性问题的更多相关文章
- Vue使用watch监听一个对象中的属性
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue监听页面中的某个div的滚动事件,并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- vue 监听store中的数值
computed: { isFollow () { return this.$store.state.demo.id; //需要监听的数据 } }, watch: { isFo ...
- 用VUE监听数组和对象的变化
看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue如何监听数组的变化
export function def (obj: Object, key: string, val: any, enumerable?: boolean) { Object.defineProper ...
- vue 监听变量或对象
注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
随机推荐
- Silverlight,Windows 8应用开发实例教程系列汇总
Kevin Fan分享开发经验,记录开发点滴 Silverlight,Windows 8应用开发实例教程系列汇总 2012-06-18 01:05 by jv9, 2145 阅读, 3 评论, 收藏, ...
- 当Table中td内容为空时,让它显示边框的办法
1 在 table的css里面加 border-collapse:collapse; 在 td 的css里面加 empty-cells:show; border-collapse设置或检索表 ...
- Django-CKeditor使用笔记
1. 安装django-ckeditor $ pip install django-ckeditor 2. 在setting中,添加ckeditor , ckeditor_uploader 到INST ...
- PCB SQL SERVER 发送邮件(异步改同步)
采用SQL SERVER发送邮件是队列方式(异步)发送邮件,所以在我们执行发送邮件后,无法立即获取到邮件是否发送成功了,而在PCB行业实际应用中是需要立即获取发送邮件是否成功的状态来决定下一步逻辑该如 ...
- [Apple开发者帐户帮助]六、配置应用服务(5.2)推送通知(APN):使用TLS证书与APN通信
您的通知服务器可以使用TLS证书与Apple推送通知服务(APN)通信. 首先在开发者帐户中启用推送通知.接下来生成适用于开发和生产环境的APNs客户端TLS证书.然后从Mac导出客户端TLS标识并将 ...
- Boost.Build特点(译)
Boost.Build Boost.Build makes it easy to build C++ projects, everywhere. Boost.Build让构建C++项目在任何地方都很容 ...
- MFC学习篇(一):用OpenCV显示视频
首先是一些基础的步骤,如建立MFC应用,添加按钮等,博主主要参考了下面这篇文章,其中的前32步都是用OpenCV显示图片和视频所必须的,即通用的.由于LZ原来有配置OpenCV的基础,所以配制还是比较 ...
- 357 Count Numbers with Unique Digits 计算各个位数不同的数字个数
给定一个非负整数 n,计算各位数字都不同的数字 x 的个数,其中 0 ≤ x < 10n.示例:给定 n = 2,返回 91.(答案应该是除[11,22,33,44,55,66,77,88,99 ...
- vmware workstation 14 黑屏处理方法
从12升级到14以后,所有老的虚拟系统全部黑屏.进行了一波操作,例如:虚拟机-管理-更改硬件兼容性,选择14.黑屏将加速3D图形勾选去掉:启动,关闭,再勾选上,启动.黑屏将显示器选择为指定监视器,黑屏 ...
- body全屏css/网页全屏设置/全屏样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...