vue.js 深度监测
1、select 控件赋值改变,但是无法获取
解决方法,在监测时手动赋值新值
'model.UseType': {
handler(newVal, oldVal) {
$("#UseType").val(newVal);
GetAppList();
},
deep: true
}
2、select 需要绑定或者获取的数据较多,以前都是通过data-XXX来保存
解决方法,直接将value绑定为整个对象,监测整个对象的变化
2.1 html绑定
<div class="mws-form-row">
<label>所属基地</label>
<div class="mws-form-item large">
<select id="DisID" name="DisID" v-model="DisSelInfo">
<option v-for="option in DisList" v-bind:value="option">
{{option.DisName}}
</option>
</select>
</div>
</div>
2.2 vue data和watch
var vue = new Vue({
el: '#mws-form',
data: {
model: {
SoApID: -1,
SoluID: GetQueryString("id"),
UseType:1,
AplicationIDs: "",
StartTime: "",
PredictTime: "",
EndTime: "",
Principal: -1,
WriteTime: "",
EntID: parent.$("#LockEnt").val(),
DisID: -1,
CreateTime: "",
State: 1,
Remark: "",
},
DisSelInfo:null,
DisList: [],
AplicationList: [],
CheckedAppList:[]
},
watch: {
'DisSelInfo': {
handler(newVal, oldVal) {
GetAppList();
},
deep: true
},
2.3 取值
$.post(url, { EntID: parent.$("#LockEnt").val(), DisClass: 1, DisType: vue.DisSelInfo.DisType, DisID:vue.DisSelInfo.DisID }, function (result) {
vue.js 深度监测的更多相关文章
- Angular和Vue.js 深度对比
Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...
- 比官方文档更易懂的Vue.js教程!包你学会!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...
- Vue.js系列之vue-router(上) (转载自向朔1992)
概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧.一般的单页面应用是基于路由或页面之间的链 ...
- Vue.js系列(一):Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
- vue.js是什么?它的优点有哪些?
Vue.js 是一套响应式的 JavaScript 开发库.其他前端开发库也有很多,比如 jQuery.ExtJS.Angular 等. Vue.js 自问世以来所受关注度不断提高,在现在的市场上,V ...
- Vue.js中 watch(深度监听)的最易懂的解释
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...
- Vue.js vs React vs Angular 深度对比[转]
这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客观来说,作为核 ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
随机推荐
- 思考--PostgreSQL在与mysql的比较中稍微弱势项
PostgreSQL在与mysql的比较中稍微弱势项: 1.都是堆表,没有所谓的聚集索引表,其实问题不大,聚集索引表也只是在使用聚集索引那些列有加速,而且pg也有聚集索引,只不过要定期重建. 2.mv ...
- 为什么只有ip地址和端口号需要主机字节序到网络字节序的转换?
答复是:因为内容是二进制流,不是整数. 整数(int.uint16.uint32)的表达,是需要多字节的,在不同cpu上,字节次序是不同的.因此,从A主机到B主机,如果是异构的,就需要做字节调整.同构 ...
- PythonError解决方案
# Pip Error pip install * error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visua ...
- 解析Nuxt.js Vue服务端渲染摸索
本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...
- Largest Beautiful Number CodeForces - 946E (贪心)
大意: 定义一个好数为位数为偶数, 且各位数字重排后可以为回文, 对于每个询问, 求小于$x$的最大好数. 假设$x$有$n$位, 若$n$为奇数, 答案显然为$n-1$个9. 若为偶数, 我们想让答 ...
- 剑指offer-二进制中1的个数-进制转化-补码反码原码-python
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. ''' 首先判断n是不是负数,当n为负数的时候,直接用后面的while循环会导致死循环,因为负数 向左移位的话最高位补1 ...
- Homebrew学习(一)之初认识
Homebrew Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等很多实用的功能.简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,会 ...
- iPad和iPhone上的应用程序图标
iPad和iPhone上的应用程序图标 问:如何在iPad和iPhone使用我的应用程序包中的图标文件? 答:下面是处理文件的图标为iPhone专用的应用程序,iPad的专用应用程序,以及通用的应用程 ...
- SpringBootMVC02——Spring Data JPA的使用&JSP的使用
Spring Data JPA的使用 实体层 package com.littlepage.domain; import javax.persistence.Entity; import javax. ...
- PHP漏洞函数
1. is_numeric函数 bool is_numeric ( mixed $var ) 此函数用于判断变量是否数字或者数字字符串,不仅能接受十进制,还能接受十六进制,这样就有了绕过的方法 < ...