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) {
将偷懒进行到极致,是一个程序员的基本素养