vue使用中不理解的地方

问题描述

问 题

一、想做一个在非表单中的input数字验证，相关代码如下：
问题：
1、在其中一个input的输入中文后，发现页面console中出现了四个11，似乎验证方法validatorNumber执行了四次。
2、将验证方法validatorNumber中的console.log(this.validatorResult);放出后页面加载时会出现不停console三个true，一个false的死循环。
3、在执行果验证方法validatorNumber后data中的validatorResult的值不会改变，始终为true。
目的:
1、想实现错误信息的根据input值是否显示
2、若存在验证不通过，将最终的验证结果设为false

不知道问题出在哪，哪位大神帮忙解答一下

var vue = new Vue({
        el: '#vue',
        data: {
            chartOption: barOption,
            /*验证规则*/
            validator: {
                number: /^\s?\d*$/
            },
            /*最终验证结果*/
            validatorResult: true
        },
        methods: {
            validatorNumber: function (key) {
                this.validatorResult = this.validator.number.test(this.chartOption[key]);
                console.log(11);
                // console.log(this.validatorResult);
                return !this.validator.number.test(this.chartOption[key]);
            }
        }
    });

...
<tr v-show="!chartOption.useSimple">
    <td>坐标系网格</td>
    <td>
        左边距
        <span class="span-width-5"></span>
        <input type="text" class="short-input" v-model="chartOption.gridLeft">
        PX
        <span v-show="validatorNumber('gridLeft')" class="error-span">只能输入数字</span>
        <span class="span-width-10"></span>
        上边距
        <span class="span-width-5"></span>
        <input type="text" class="short-input" v-model="chartOption.gridTop">
        PX
        <span v-show="validatorNumber('gridTop')" class="error-span">只能输入数字</span>
        <span class="span-width-10"></span>
        右边距
        <span class="span-width-5"></span>
        <input type="text" class="short-input" v-model="chartOption.gridRight">
        PX
        <span v-show="validatorNumber('gridRight')" class="error-span">只能输入数字</span>
        <span class="span-width-10"></span>
        下边距
        <span class="span-width-5"></span>
        <input type="text" class="short-input" v-model="chartOption.gridBottom">
        PX
        <span v-show="validatorNumber('gridBottom')" class="error-span">只能输入数字</span>
        <span class="span-width-10"></span>
    </td>
</tr>
...

解决方案

你绑定了 4个 validatorNumber('gridBottom')" 方法，当然会有 4 个 11 啊。
建议使用 computed 做验证.

这篇关于vue使用中不理解的地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！