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 深度监测的更多相关文章

  1. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  2. 比官方文档更易懂的Vue.js教程!包你学会!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...

  3. Vue.js系列之vue-router(上) (转载自向朔1992)

    概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧.一般的单页面应用是基于路由或页面之间的链 ...

  4. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  5. vue.js是什么?它的优点有哪些?

    Vue.js 是一套响应式的 JavaScript 开发库.其他前端开发库也有很多,比如 jQuery.ExtJS.Angular 等. Vue.js 自问世以来所受关注度不断提高,在现在的市场上,V ...

  6. Vue.js中 watch(深度监听)的最易懂的解释

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  7. Vue.js中 watch的理解以及深度监听

    如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...

  8. Vue.js vs React vs Angular 深度对比[转]

    这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客观来说,作为核 ...

  9. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

随机推荐

  1. spring boot-13.数据访问

    1.spring boot 的自动配置提供的方便快捷的数据库操作服务,只需要进行少量配置即可连接数据库.spring boot 在org.springframework.boot.autoconfig ...

  2. C++学习——在C文件中调用C++文件中的函数

    1.CPP文件中的内容 #include "mytest.h" #include <iostream> using namespace std; int add(con ...

  3. flask中使用jsonify和json.dumps的区别

    一.实验 python的flask框架为用户提供了直接返回包含json格式数据响应的方法,即jsonify,在开发中会经常用到.如下一段简单的flask后端代码,服务端视图函数根据请求参数返回json ...

  4. bootstrap modal 闪退的办法

     调用:

  5. 04.AutoMapper 之投影(Projection)

    https://www.jianshu.com/p/031553705417 投影(Projection) 投影将源转换为目标而不是扁平化对象模型.如果没有额为的配置AutoMapper需要一个扁平化 ...

  6. crm---本项目的权限控制模式

    一:url权限:  最底层的权限控制,,缺点在与没有预判的机制,造成客户体验下降.           前提: 为controller中的每一个方法(即资源)定义一个资源(Resource)名称,,该 ...

  7. vue项目1-pizza点餐系统2-配置路由跳转

    功能目标:点击导航栏中的菜单.主页.路由跳转到不同的组件,点击谁就在在导航栏下展示谁. 1.在router文件夹中(在用脚手架cli搭建项目时,有个couter的选yes)的index.js中,导入如 ...

  8. vue报错——Module not found: Error: Can't resolve 'less-loader sass' in ...

    npm install sass-loader -D npm install node-sass -D

  9. 扇形导航 css3

    本篇文章将通过对css3中的2d变化以及过渡进行分析设计 先放上最终效果图                 功能实现:1.给扇形home元素设置点击事件并添加2d旋转 2.给导航栏设置2d旋转 并通过 ...

  10. 日语能力考试N2级必备外来语

    日语能力考试N2级必备外来语 ア行外来语アンテナ:(antenna)         天线インタビュー :(interview)         采访,访谈ウイルス:(virus )        病 ...