如何让vue的watch在porp不变情况下也能监控到

我有一个场景,使用iviewui的表单提交内容时,由服务器返回校验信息,如果校验失败将错误提示在formitem上,即将formitem的error属性赋值,但是如果如果两次服务器返回的错误提示一样,第二次formitem就不显示错误了。
我的代码:

<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数据能变化,我先改为“”,再赋值也watch不到,看来改成“”没被系统获知到,哪位能指点下这种情况改怎么处理?

阅读 4.6k
3 个回答

现在看来是我在执行appTable.formError.name = "";后,formError.name根本没同步到Form-Item的error上;紧接着再执行appTable.formError.name = "名字不能小于5位!";,其实并没有改变error的数据,watch没检测到变化导致没执行。

===========20180201 18:10
改为:

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

可以执行了,但是我觉得拐了个弯,不优雅。

可以看看有没有再次出发校验的方法, 手动触发一下

watch formError的时候配置一下deep

    watch: {
        formError: {
            handler () {},
            deep: true
        }
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题