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

starleaf1

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

<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。有什么办法可以让我<form>从里面抢走<v-form>吗？

机会

您可以使用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);
    }
  },
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。