Question

当前，您可以设置规则，一旦用户更改输入值，这些规则将生效。例如：

模板部分

<v-text-field
  v-model="title"
  label="Title"
></v-text-field>

逻辑

  export default {
    data () {
      return {
        title: '',
        email: '',
        rules: {
          required: value => !!value || 'Required.'
        },
      }
    }
  }

当用户聚焦并从该元素上除去焦点时，或者当用户删除其所有内容时，将触发所需的规则。

但是，如果我们要在安装或创建组件后立即启用规则，该怎么办？有没有办法做到这一点？

我在vuetify周围进行搜索，但在不起眼的Google搜索中找不到有关此信息或示例的信息。我将不胜感激。我在Vue世界中是新手。谢谢。

Answer 1

您可以执行以下操作：

创建一个v-form并将您的textfields放置在表单中。不要忘了给您的V形表一个V型模型和一个参考。
挂载后，您可以通过this。$ refs访问v-form并调用.validate（），正如Jesper在其答案中所述。在下面的codesandbox中，您可以看到textfields立即变成红色并显示“必填”。文字。

<v-form v-model="formValid" ref="myForm">
    <v-text-field label="Field 1" :rules="rules.required"></v-text-field>
    <v-text-field label="Field 2" :rules="rules.required"></v-text-field>
</v-form>


<script>
export default {
  data() {
    return {
      formValid: false,
      rules: {
       required: [value => !!value || "Required."]
      }
    };
  },
  mounted() {
   this.$refs.myForm.validate();
 }
};
</script>

Example：

Answer 2

您应该稍作更改以实现此目的。

<ValidationProvider rules="required" v-slot="{ errors }" ref="title">
    <v-text-field
      v-model="title"
      label="Title"
    ></v-text-field>
</ValidationProvider>

然后您应该致电this.$refs.title.validate()

如果您在调用mounted()时触发了此操作，它应立即根据您的要求验证所有字段。

使Vuetify v-text-field组件默认为必需

2 个答案: