Vuetify 表单验证：Returns "False" 无指示

Question

我有一个正在尝试验证的 vuetify 表单，它总是返回 false。我为几个输入设置了规则，当规则失败时我希望看到警告（或类似的东西），但我没有得到失败原因的指示。

<template>
<v-dialog class="FormContainer" v-model='open' max-width="700" @click:outside="CloseForm">
  <v-container  style="background-color:#f6f6f6 !important; box-shadow: 0px 10px 10px #00000029;
border: 4px solid #dbdbdb;
border-radius: 20px;">
    <div class="personaClose"><v-icon x-large @click="ChangeDisplay">mdi-close</v-icon></div>
    <v-form v-if="!DisplayForm" ref="form" lazy-validation>
      <div class="TitleText">Submit a Program to Creators Connect</div>
      <div class="SubtitleText">
        Creators Connect is an online resource hub that helps future creators
        across the U.S. identify pathways into the manufacturing industry. If
        you work with or are aware of a program that we should include, please
        submit the information on the form below. If you would like to submit
        multiple programs, please submit a new form for each one.
      </div>
      <div class="HrBar" style="margin-bottom:0px !important" />
      <div class="InputGroup InputHeight">
        Program Name*
        <v-text-field
          v-model="FormResults['ProgramName']"
          outlined
          rounded
          :rules="[(v) => !!v || 'Program name is required']"
          required
          placeholder="E.g., Automotive Technology Program"
        />
      </div>
      <div class="InputGroup InputHeight">
        Company/Organization*
        <v-text-field
          v-model="FormResults['LocationName']"
          outlined
          rounded
          :rules="[(v) => !!v || 'Company/Organization is required']"
          required
          placeholder="E.g., Midlands Technical College"
        />
      </div>
<v-btn plain class='yellowButton' id='ResourceBtn' @click="SubmitForm()">Submit</v-btn>     
    </v-form>
  </v-container>
</v-dialog>
</template>

有几个输入，都是围绕与这些相同的样式设计的。其中一些是精选的。我的开发工具控制台没有问题。

<script>
export default {
    data: () => ({
        open:true,
        DisplayForm: false,
        ResourceTypeBtn: ["Reccomend a resource", "I am a member of a company"],
        FormResults: {
            Submitter: {
                Name: "",
                Email: null,
            },
            ProgramName: "",
            LocationName: "",
            ProgramDescription: "",
            ProgramWebsite: null,
            ProgramType: {
                Define: "",
                Location: [{ location: "" }],
                Cost: "",
                Length: "",
                PreReqs: "",
            },
            ContactDetails: {
                Name: "",
                Phone: "",
                Email: "",
            },
        },
}),
methods: {
        SubmitForm() {
      this.$refs.form.validate();
      // console.log(this.$refs.form.validate())
      console.log(this.FormResults);
            if(this.$refs.form.validate()){
                this.$emit("submittion");
        console.log(this.FormResults);
                this.DisplayForm = !this.DisplayForm;
            }
            // this.DisplayForm = this.$refs.form.validate();
        }
}
</script>

表单应该检查它是否有效，如果有效，请转到另一个屏幕。

Answer 1

您的 v-form 中似乎缺少 v-model。 v-model 值表示表单是否存在验证错误。

在codepen中检查这个例子： https://codepen.io/cmfc31/pen/eYGErXJ?editors=101

Vuetify 表单验证：Returns "False" 无指示

Vuetify Form Validation: Returns "False" Without Indication

javascript

vue.js

vuetify.js