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 ...
随机推荐
- C#在WinForm中使用WebKit传递js对象实现与网页交互的方法
这篇文章主要介绍了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法,涉及针对WebBroswer控件及WebKit控件的相关使用技巧,需要的朋友可以参考下 本文实例讲述了C#在W ...
- 【Codeforces 429D】 Tricky Function
[题目链接] http://codeforces.com/problemset/problem/429/D [算法] 令Si = A1 + A2 + ... + Ai(A的前缀和) 则g(i,j) = ...
- 0619-dedeCMS数据表
CMS的层级从前台分主要分为首页--栏目页--内容页,从后台分主要是四张表之间的关系: 1.模型表--dede_channeltype(顶级) 2.栏目表--dede_arctype 3.数据表:分为 ...
- js将字符串中所有反斜杠\替换成正斜杠/
区分正斜杠与反斜杠: 正斜杠:http://.http紧跟着的斜杠,离手输入最近的斜杠,shift中间斜杠.45度角斜杠.正斜杠不需要转义 反斜杠:回车与空格之间.程序表示时需要转义成\\. str. ...
- NS2学习笔记(四)
这几天学习NS2,虽然国内很多人使用,但系统的教材资料不多,只能一边看中文教材,一边看英文手册,知识点也是零零散散.过段时间等能将所有知识点串上,再总结总结.现只讲一些零碎的点记录一下. 添加新的协议 ...
- 涨知识-VI 基于TCP/UDP的应用层协议
基于TCP/UDP的应用层协议: 基于TCP: Telnet(Teletype over the Network, 网络电传),通过一个终端(terminal)登陆到网络 FTP(File Trans ...
- vs2010 视图 aspx页面设计窗口创建控件时出错 未将对象引用设置到对象的实例
第一步,首先关闭aspx页面 第二步,在单击项目右击,选择“清理” 第三步,然后在打开aspx页面,就可以看到正常的页面了. 注:一次不行的会,多做几次. 如果还是不行的话,你看看你.cs页面是否继承 ...
- 关于编辑器对<input>标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...
- echarts交叉关系图二
echarts关系图表,此图是坐标关系图,此图用的随机坐标,此图可以拖拽,更方便整理关系, 引入echarts.js就可以实现 代码: var graph={ //这是数据项目中一般都是获取到的 no ...
- 转 IDEA 解决代码提示功能消失
转载路径是 https://blog.csdn.net/hmily_hui/article/details/78213037 原文地址:https://github.com/Damao/Intell ...