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

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. Codeforces--400A--Inna and Choose Options(模拟水题)

    Inna and Choose Options Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:26 ...

  2. luogu 3383【模板】线性筛素数

    我太菜了 %韩神 #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib&g ...

  3. bzoj 2276 [ Poi 2011 ] Temperature —— 单调队列

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2276 维护 l 递减的单调队列,队头的 l > 当前的 r 就出队,因为不能是连续一段 ...

  4. Tyvj 1068 巧用扩展KMP

    Tyvj1068 给定两个长度为2*10^5的字符串为A和B 求B在A中匹配后,任意匹配长度的位置个数. KMP算法大家应该烂熟于心才好,这样碰到这样的题才能灵活运用.有时做题真的需要一点灵感.首先, ...

  5. 54. Extjs组件render说明

    转自:http://blog.chinaunix.net/uid-450400-id-2119168.html 1. 1.调用组件的render方法 panel.render('div'); 2.在配 ...

  6. Knights of the Round Table(Tarjan+奇圈)

    http://poj.org/problem?id=2942 题意:n个武士,某些武士之间相互仇视,如果在一起容易发生争斗事件.所以他们只有满足一定的条件才能参加圆桌会议:(1)相互仇视的两个武士不能 ...

  7. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  8. 02-vue过滤器和键盘修饰符

    过滤器 概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的 ...

  9. 第一个只出现一次的字符--java实现

    /** * 主要思想是通过数组来保存每个字符的出现次数,数组访问O(1),所以总时间复杂度可以保持O(n),通过两次遍历可以解决问题 * @param ch * @return */ public s ...

  10. cocos2d-x 不规则碰撞检测 【转载】

    原文:http://www.2cto.com/kf/201401/272331.html //判断有没有点到有材质的部分, p_point相对, CCSprite坐标  (p_point是相对 Spr ...