在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何讓vue的watch在porp不變情況下也能監(jiān)控到

如何讓vue的watch在porp不變情況下也能監(jiān)控到

我有一個(gè)場(chǎng)景,使用iviewui的表單提交內(nèi)容時(shí),由服務(wù)器返回校驗(yàn)信息,如果校驗(yàn)失敗將錯(cuò)誤提示在formitem上,即將formitem的error屬性賦值,但是如果如果兩次服務(wù)器返回的錯(cuò)誤提示一樣,第二次formitem就不顯示錯(cuò)誤了。
我的代碼:

<Modal
        ref="modal_addUser"
        v-model="modal_addUser"
        :loading="modal_addUser_loading"
        title="添加新用戶"
        @on-ok="saveUser('formData')">
        <i-Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80">
            <Form-Item label="姓名" prop="name" ref="form-name" 
                :rules="{ required: true, message: '年齡不能為空', trigger: 'blur' }"
                :error="formError.name">
                <i-Input v-model="formData.name" placeholder="姓名" autofocus></i-Input>
            </Form-Item>
            <Form-Item label="年齡" prop="age" ref="form-age">
                <i-Input v-model="formData.age" placeholder="年齡"></i-Input>
            </Form-Item>
            <Form-Item label="地址" prop="address" ref="form-address">
                <i-Input v-model="formData.address" placeholder="地址"></i-Input>
            </Form-Item>
        </i-Form>
    </Modal>
var appTable = new Vue({
        el: "#appTable",
        data: function() {
            var self = this;
            return {
                formData: {
                    name: '',
                    age: '',
                    address: ''
                },
                formError: {
                    name: '1',
                    age: '1',
                    address: '1'
                }
            }
       }
       //中間省略了
       saveUser: function(name){
       //其他省略
           appTable.formError.name = "";
           appTable.formError.name = "名字不能小于5位!";
       }

為了能是formError.name數(shù)據(jù)能變化,我先改為“”,再賦值也watch不到,看來改成“”沒被系統(tǒng)獲知到,哪位能指點(diǎn)下這種情況改怎么處理?

回答
編輯回答
舊螢火

watch formError的時(shí)候配置一下deep

    watch: {
        formError: {
            handler () {},
            deep: true
        }
    }
2017年9月13日 03:51
編輯回答
愚念

可以看看有沒有再次出發(fā)校驗(yàn)的方法, 手動(dòng)觸發(fā)一下

2017年4月19日 17:05
編輯回答
安于心

現(xiàn)在看來是我在執(zhí)行appTable.formError.name = "";后,formError.name根本沒同步到Form-Item的error上;緊接著再執(zhí)行appTable.formError.name = "名字不能小于5位!";,其實(shí)并沒有改變error的數(shù)據(jù),watch沒檢測(cè)到變化導(dǎo)致沒執(zhí)行。

===========20180201 18:10
改為:

self.formError.name = "";
  self.$nextTick(function() {
  self.formError.name = "名字不能小于5位!";
})

可以執(zhí)行了,但是我覺得拐了個(gè)彎,不優(yōu)雅。

2017年1月7日 06:00