表单$ref在方法中未定义?

Question

我有一个非常简单的Vuetify表单，它的方法是 ref="form". 当我按下提交键时，我想验证并以编程方式提交表单，但是由于某些原因 this.$refs.form 返回未定义。

我几乎希望这是个错别字，因为这看起来很简单。

<template>
  <v-form
    v-if="!submitted"
    ref="form"
    v-model="valid"
    name="contactForm"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    method="POST"
    @submit.prevent="submit">
    <input
      type="hidden"
      name="form-name"
      value="contactForm">

    ...input fields

    <v-row justify="center">
      <v-col
        sm="12"
        class="text-center">
        <v-btn
          :disabled="!valid || sendingForm"
          color="accent"
          depressed
          :ripple="false"
          x-large
          type="submit">
          {{ sendingForm ? 'Loading...' : 'Submit' }}
        </v-btn>
      </v-col>
    </v-row>
    <p class="d-none">
      <label for="bot-field">Don't fill this out: </label>
      <input
        type="text"
        name="bot-field">
    </p>
  </v-form>
</template>

<script>
  export default {
    methods: {
      async submit() {
        this.sendingForm = true;
        console.log('refs: ', this.$refs); <-- returns undefined for this.$refs.form
        if (this.$refs.form.validate()) {
          console.log('refs: ', this.$refs); <-- also returns undefined for this.$refs.form
          this.$refs.form.submit();
          this.submitted = true;
        }
        this.sendingForm = false;
      }
    },
  }
</script>

我试着把 v-if 在表格上，去掉 type="submit添加 @click="submit 钮上，去除 @submit.prevent="submit 从表格上看......似乎什么都没用! 有人遇到过这样的事情吗？谢谢！我有一个非常简单的Vuetify表格，里面有ref="form"。

Answer 1

以下是对我有用的方法

<v-form
  ref="form"
  v-model="valid"
  name="contactform1"
  action="/contact"
  method="post"
  data-netlify="true"
  netlify-honeypot="bot-field"
>
  <input type="hidden" name="form-name" value="contactform1" />
  <v-row class="spacing6">
    <v-col cols="12" sm="6" class="pa-6">
      <v-text-field
        v-model="name"
        :rules="nameRules"
        :label="$t('common.form_name')"
        class="input"
        name="name"
        required
      />
    </v-col>
    <v-col cols="12" sm="6" class="pa-6">
      <v-text-field
        v-model="email"
        :rules="emailRules"
        :label="$t('common.form_email')"
        class="input"
        name="email"
        required
      />
    </v-col>
  </v-row>
  <div class="btn-area">
    <div class="form-control-label">
      <v-checkbox
        v-model="checkbox"
        color="primary"
        :rules="[v => !!v || 'You must agree to continue!']"
        :label="$t('common.form_terms')"
        required
      />
      <a href="#">{{ $t('common.form_privacy') }}</a>
    </div>
    <v-btn
      color="primary"
      outlined
      @click="validate"
      large
      type="submit"
      value="Send message"
    >
      {{ $t('common.form_send') }}
      <v-icon class="right-icon">mdi-send</v-icon>
    </v-btn>
  </div>
</v-form>

Answer 2

最后我走了一条稍微不同的路线来解决这个问题。我依靠的是 Vuetify表格文档 以及 Netlify文章 关于与Vue集成表单。

  <template>
    <v-form
      v-if="!submitted"
      ref="form"
      v-model="valid"
      name="contactForm"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      method="POST"
      @submit.prevent="submit">
      <input
        type="hidden"
        name="form-name"
        value="contactForm">
      <v-row>
        <v-col
          cols="12"
          md="6">
          <v-text-field
            v-model="form.firstName"
            color="primary"
            label="First Name *"
            outlined
            :rules="nameRules"
            required />
        </v-col>
        <v-col
          cols="12"
          md="6">
          <v-text-field
            v-model="form.lastName"
            color="primary"
            label="Last Name *"
            outlined
            :rules="nameRules"
            required />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="form.email"
            color="primary"
            label="Email *"
            type="email"
            :rules="emailRules"
            outlined
            required />
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="12">
          <v-textarea
            v-model="form.message"
            color="primary"
            label="Message *"
            outlined
            :rules="nameRules"
            required />
        </v-col>
        <v-col
          sm="12"
          class="text-center">
          <v-btn
            :disabled="!valid || sendingForm"
            color="accent"
            depressed
            :ripple="false"
            x-large
            type="submit">
            {{ sendingForm ? 'Loading...' : 'Submit' }}
          </v-btn>
        </v-col>
      </v-row>
      <p class="d-none">
        <label for="bot-field">Don't fill this out: </label>
        <input
          type="text"
          name="bot-field">
      </p>
    </v-form>
  </template>

  <script>
    import axios from 'axios';

    export default {
      data: () => ({
        ...other stuff,
        emailRules: [
           v => !!v || 'E-mail is required',
           v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
        ],
        form: {
          email: '',
          firstName: '',
          lastName: '',
          message: '',
        },
        nameRules: [
          v => !!v || 'Name is required.',
        ],
      }),

      methods: {
        encode (data) {
          return Object.keys(data)
           .map(
             key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
           )
          .join("&");
        },
        submit () {
          this.sendingForm = true;

          const axiosConfig = {
            header: { 'Content-Type': 'application/x-www-form-urlencoded' }
          };

          axios
            .post(
              '/',
              this.encode({
                'form-name': 'contactForm',
                ...this.form
              }),
              axiosConfig
            )
            .then(() => this.submitted = true)
            .catch(err => console.log(err))
            .finally(() => this.sendingForm = false);
          }
       }
  </script>

因为验证是用 required 和 :rules我不需要在提交函数中手动验证它。因为它与Netlify Forms绑定，我必须运行一个带有编码的表单字段的axios POST。

顺便说一下，我意识到，当控制台日志记录时 this.$refs然后，表单出现未定义。然而，如果我控制台日志 this.$refs.form，然后它给我的裁判如期而至。