Vue、vuetify：如何在创建、添加后立即验证输入

Question

我试图弄清楚如何在添加输入后立即验证输入：

模板：

<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);
        },
    },
});

代码笔： https: //codepen.io/Zurab-D/pen/dymGaRY

我的意思是，当单击按钮时，会出现一个新的输入，并且默认情况下没有“错误：请输入文本”错误消息。

我可以让这条消息立即出现吗？

Answer 1

您可以将使用 v-for 指令的模板代码放在v-form标记之间：

<v-form ref="form">
  <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>

然后在add()方法内部使用v-form 参考中的内置validate()函数验证表单

async add(val) {
  this.messages.push(val);
  await this.$nextTick(); // wait until a new text-field will be rendered
  this.$refs.form.validate(); //validate form
},

CodePen 上的一个例子在这里