Vue+Vuetify如何实现新增输入框后立即触发校验显示错误提示

问题场景 #

使用Vue、Vuetify开发时，点击按钮动态新增绑定了校验规则的v-text-field，新增的空输入框默认不会自动触发校验，不会展示预设的“Error: Please enter text”错误提示。

原有模板代码 #

<div id="app">
    <div
        v-for="(message, index) in messages"
        :key="index"
    >
        <v-text-field
            v-model="messages[index]"
            :rules="[v => !!v || 'Error: Please enter text']"
        />
    </div>
  
    <v-btn @click="add()">Add input</v-btn>
</div>

原有JS逻辑代码 #

new Vue({
    el: '#app',

    data: {
        messages: ['Hi', 'Hello'],
    },

    methods: {
        add(val) {
            this.messages.push(val);
        },
    },
});

问题原因 #

Vuetify表单输入组件默认仅在输入事件触发、输入框失焦、手动调用校验方法三类场景执行规则校验，动态挂载的新输入框首次渲染时不会自动执行校验逻辑，因此空值不会弹出错误提示。 #

实现方案 #

可根据业务场景二选一：

方案1：精准触发单个新增输入框校验 #

适合不希望影响已有输入框校验状态的场景，步骤如下：

• 给v-text-field绑定动态ref，通过索引定位到新增的输入框实例
• 新增数据后，等DOM更新完成，直接调用对应输入框实例的validate()方法触发校验
  修改后完整代码：

<div id="app">
    <div
        v-for="(message, index) in messages"
        :key="index"
    >
        <v-text-field
            :ref="`inputField_${index}`"
            v-model="messages[index]"
            :rules="[v => !!v || 'Error: Please enter text']"
        />
    </div>
  
    <v-btn @click="add()">Add input</v-btn>
</div>

new Vue({
    el: '#app',

    data: {
        messages: ['Hi', 'Hello'],
    },

    methods: {
        add(val) {
            this.messages.push(val);
            // 等DOM渲染完成后再获取新输入框实例
            this.$nextTick(() => {
                const newIndex = this.messages.length - 1;
                // v-for绑定的动态ref返回值为数组，取下标0拿到组件实例
                this.$refs[`inputField_${newIndex}`][0].validate();
            });
        },
    },
});

方案2：包裹v-form触发表单全量校验 #

适合本身就需要表单提交全量校验的场景，代码更简洁：

• 用v-form包裹所有表单项，给表单绑定ref
• 新增数据、DOM更新完成后，调用表单实例的validate()方法，会自动校验所有表单项，新增的空输入框会直接展示错误提示
  示例代码：

<div id="app">
    <v-form ref="dynamicForm">
        <div
            v-for="(message, index) in messages"
            :key="index"
        >
            <v-text-field
                v-model="messages[index]"
                :rules="[v => !!v || 'Error: Please enter text']"
            />
        </div>
      
        <v-btn @click="add()">Add input</v-btn>
    </v-form>
</div>

new Vue({
    el: '#app',

    data: {
        messages: ['Hi', 'Hello'],
    },

    methods: {
        add(val) {
            this.messages.push(val);
            this.$nextTick(() => {
                this.$refs.dynamicForm.validate();
            });
        },
    },
});

注意：如果新增输入框时不需要重新校验之前已经填写正确的输入项，选方案1更合适；如果表单提交本身就需要全量校验，直接选方案2即可。

内容的提问来源于stack exchange，提问作者DZN