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

Question

I have a Vuetify form with a ref, like this

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

Onto it I attached a default-preventing submit handler whose method is as follows:

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
});

The problem is new FormData() only accepts a pure HTML <form> element, while this.$refs.form is a VueComponent. Is there a way I can grab the <form> from inside a <v-form>?

Answer 1

You can get the form element using this.$refs.form.$el

Here is the working codepen: 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);
    }
  },
})