猿问

如何让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不到,看来改成“”没被系统获知到,哪位能指点下这种情况改怎么处理?



慕尼黑的夜晚无繁华
浏览 672回答 3
3回答

四季花海

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

喵喵时光机

watch formError的时候配置一下deep&nbsp; &nbsp; watch: {&nbsp; &nbsp; &nbsp; &nbsp; formError: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler () {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deep: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答