如何从 Vuetify 的 <v-form> 组件中提取 <form> 元素

Question

我有一个带有 ref 的 Vuetify 表单，就像这样

<v-form ref="form" method="post" @submit.prevent="handleSubmit">

我在上面附加了一个默认阻止提交处理程序，其方法如下：

window.fetch(`${this.$store.state.apiServer}/some-url`, {
  method: 'post',
  body: new FormData(this.$refs.form)
}).then(response => {
  // Do stuff with the response
}).catch(() => {
  // HCF
});

问题是 new FormData() 只接受纯 HTML <form> 元素，而 this.$refs.form 是 VueComponent。有没有办法从 <v-form> 中获取 <form>？

Answer 1

您可以使用 this.$refs.form.$el

获取表单元素

这是工作代码笔：https://codepen.io/chansv/pen/OJJOXPd?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-text-field
        v-model="name"
        :counter="10"
        :rules="nameRules"
        label="Name"
        required
      ></v-text-field>

      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>
      <v-btn type="submit" @click="formSubmit">submit</v-btn>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
      v => (v && v.length <= 10) || 'Name must be less than 10 characters',
    ],
    email: '',
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
    ],
  }),

  methods: {
    formSubmit() {
      console.log(this.$refs.form.$el);
    }
  },
})

如何从 Vuetify 的 <v-form> 组件中提取 <form> 元素

How to extract a <form> element from Vuetify's <v-form> component

form-data

vuetify.js