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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM