今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题,刚开始代码如下

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监听数组中某个属性,计算其他属性问题的更多相关文章

  1. Vue使用watch监听一个对象中的属性

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...

  2. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  3. vue监听页面中的某个div的滚动事件,并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  4. vue 监听store中的数值

      computed: {   isFollow () {     return this.$store.state.demo.id; //需要监听的数据   } }, watch: {   isFo ...

  5. 用VUE监听数组和对象的变化

    看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...

  6. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  7. vue如何监听数组的变化

    export function def (obj: Object, key: string, val: any, enumerable?: boolean) { Object.defineProper ...

  8. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  9. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

随机推荐

  1. 洛谷P1281 书的复制

    题目描述 现在要把m本有顺序的书分给k给人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如不能把第一.第三.第四本书给同一个人抄写. ...

  2. 91. Ext中获取combobox中的valueField和displayField的值

    转自:https://blog.csdn.net/jcy472578/article/details/42113119Ext.getCmp("schemaVersion").val ...

  3. mysql_mssql_access_2017年最新手机号段归属地数据库(17年4月更新)360569记录

    mysql,mssql,access 三种格式免费分享给大家,末尾有下载地址 2017年4月最新版手机号段归属地,也叫手机归属地数据库  共360569条记录,三种格式:MYSQL,MSSQL,acc ...

  4. oracle更新大量数据太慢,可以通过游标实现的例子

    declare cursor city_cur isselect t.new_customer_id,t.old_customer_id from citsonline.crm_customer_tm ...

  5. [Swift通天遁地]三、手势与图表-(11)制作雷达图表更加形象表示各个维度的情况

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. 知识记忆1:标志寄存器PSW

    8086CPU的flag寄存器结构如下: [ ] [ ] [ ] [ ] [OF][DF][IF][TF][SF][ZF][ ][AF][ ][PF][ ][CF] 其中debug中的显示为: 标志 ...

  7. BZOJ 2592 随机化(伪)

    思路: 放yousiki大爷题解 http://yousiki.net/index.php/archives/82/ 我写的是随机化 既然gzz证了最终答案的上界是O(N)的 那么我们可以n^2枚举所 ...

  8. python 生成器函数.推导式.生成器表达式

    一.生成器 什么是生成器,生成器的实质就是迭代器 在python中有三种方式来获取生成器: 1.通过生成器函数 2.通过各种推导式来实现生成器 3.通过数据的转换也可以获取生成器 1 def func ...

  9. Data URI scheme:data:image/jpeg;

    今天在用一个croppic的jQuery裁剪图片的插件的时候,发现在后台获取图片时,无法通过Request.File获取了,但是通过Request.Form[]可以.用firebug跟了一下发现,图片 ...

  10. javascript特殊值常量

    Infinity 表示无穷大的特殊值.当数字运算结果超出javascript能表示的数字范围时. Nan 特殊的非数字值(not a number).0除0.数字运算符的操作数为字符等情况. Numb ...