Как извлечь элемент <form>из Vuetify'sсоставная часть - PullRequest
Новая
       10

Как извлечь элемент <form>из Vuetify'sсоставная часть

1 голос
/ 31 октября 2019

У меня есть форма 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>?

1 Ответ

1 голос
/ 31 октября 2019

Вы можете получить элемент формы, используя 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);
    }
  },
})
...