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 ...
随机推荐
- [BZOJ 2006] 狼抓兔子
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1001 [算法] 最小割 [代码] #include<bits/stdc++.h ...
- bzoj3105 [cqoi2013]新Nim游戏——贪心+线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3105 首先,要先手必胜,就不能取后让剩下的火柴中存在异或和为0的子集,否则对方可以取成异或和 ...
- Linux命令补充及基础优化。
1.用户部分 1.1 创建新用户 涉及命令 useradd [root@oldboyedu-50 ~]# useradd oldboy #添加用户 oldboy 1.2 设置密码 [root@oldb ...
- C. Searching for Graph(cf)
C. Searching for Graph time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Gold Coins
http://poj.org/problem?id=2000 #include<stdio.h> ; int main() { int coin[N]; ,j,k; j = ; k = ; ...
- bzoj1992鬼谷子的钱袋(二分乱搞 二进制)
1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3223 Solved: 2333 Descriptio ...
- [Swift通天遁地]三、手势与图表-(3)通过捏合手势放大和缩小图像视图
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Elasticsearch创建文档,利用Kibana进行创建文档
首先先来了解一下什么是文档,es里边的文档相当于mysql数据库里边的一张表,如果你用过mongodb的话,那么肯定对es这种数据格式一定很了解了.接下来我们来看一下如何创建一个文档. PUT /sd ...
- Linux命令(002) -- free
一.准备知识 Linux和Windows系统在内存管理机制方面有很大的不同.在Linux中经常发现空闲内存很少,似乎所有的内存都被系统占用了,表面感觉是内存不够用了,其实不然.这是Linux内存管理的 ...
- js加减乘除在线计算器代码
js加减乘除在线计算器代码 在线演示本地下载