Question

我有一个canActivate的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 });仅接受纯HTML new FormData()元素，而<form>是this.$refs.form。有什么方法可以从VueComponent内部抓取<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>元素

1 个答案: