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) {

  

原文地址:https://www.cnblogs.com/bamboo-zhang/p/9546891.html