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

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. 超级有用的git reset --hard和git revert命令

    很多时候,git新手容易误操作,比如,在levelIISZ-1.4.dev分支下,运行了git pull idc cpp-1.0的结果,这样做麻烦很大,经常导致maven项目格式不正确,这个时候,可以 ...

  2. 【NOI2009】Bzoj1562&Codevs1843 变换序列

    目录 List Description Input Output Sample Input Sample Output HINT Solution 官方题解%莫队 Code Position: htt ...

  3. nodejs Yarn替代npm的包管理——快速、安全、可靠性高的依赖管理

    Yarn能帮你解决的五件事 转自: http://www.qingpingshan.com/jb/javascript/185590.html 长话短说(TL;DR):在 JavaScript 领域有 ...

  4. bzoj 1453 双面棋盘

    题目大意: 一个黑白方格图 支持单点修改 查询黑色与白色联通快个数 思路: 可以把每一行压为一个点 使用线段树来维护 然后两行合并的时候使用并查集来合并 #include<iostream> ...

  5. Makefile 实际用例分析(三) ------- 是用GUN automake 处理自己的工程

    前面两篇已经说过了自己怎么去为一个工程写makefile: 第一篇 第二篇 现在这一篇说的是怎么使用GNU的工具去写一个符合开源标准的Makefile呢! 首先我觉你应该参考: Automake Au ...

  6. E20170925-hm

    arc  n. 综合症状; 弧(度); 天穹; 电弧,弧光.; vi. 形成拱状物; 循弧线行进; wrap  vt. 包; 缠绕; 用…包裹(或包扎.覆盖等); 掩护;            n. ...

  7. window.onload的使用

    window.onload:当页面加载的时候可以调用某些函数 例如: 1.最简单的调用方式 直接写到html的body标签里面,如: <html> <body onload=&quo ...

  8. nodejs在windows下的安装

    Windowv 上安装Node.js Windows 安装包(.msi) : 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node-v0.10.26-x ...

  9. 详细介绍idea实现javaweb项目登入注册(华东交通大学教务处信息管理系统)、模糊查询

    详细介绍idea实现javaweb项目登入注册(华东交通大学教务处信息管理系统).模糊查询 1,创建数据库,我的用户名:root 密码:root,数据库名称:lianwei,表名:login 2,效果 ...

  10. 【洛谷3321_BZOJ3992】[SDOI2015]序列统计(原根_多项式)

    题目: 洛谷3321 分析: 一个转化思路比较神(典型?)的题-- 一个比较显然的\(O(n^3)\)暴力是用\(f[i][j]\)表示选了\(i\)个数,当前积在模\(m\)意义下为\(j\)的方案 ...