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

Question

目前，您可以设置在用户更改输入值后生效的规则。例如：

模板部分

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

逻辑

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

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

但是，如果我们希望在安装或创建组件后立即启用规则，会发生什么情况？有办法实现这一点吗？

我在 vuetify 周围搜索，但在我简单的谷歌搜索中找不到有关此的信息或示例。我将不胜感激的帮助。我是 vue 世界的新手。谢谢。

Answer 1

您可以执行以下操作：

创建一个V 形形状并将其放置textfields在该形状内。不要忘记给你的 v-form 一个 v-model 和一个 ref。
安装后，您可以通过 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>

例子：