Question

我正在将props传递给我的表格。因此，可以通过这些props或用户输入来填充表单中的数据。因为我使用的是props，所以我没有为这些元素定义data。而是使用v-model并传递我的props。

然后的问题是，当我要提交时，如何获取所有表单数据。

我意识到我可以在表单输入中定义refs以便从表单中获取数据以便提交。但是，使用该解决方案，我必须单独遍历每个数据元素。我想做的只是穿过form，并在forEach循环中提取数据。

有可能吗？

这是我模板的顶部（使用Vuetify作为框架），其中包含表单的元素之一：

<template>
<v-container fluid grid-list-lg class="come_closer">
  <v-layout row wrap>
    <v-flex xs12 v-for="(creds, index) in amazonCredsArray" :key="creds.id" class="pb-4">
      <v-card class="lightpurple">
        <v-card-title>
          <v-icon class="my_dark_purple_text">language</v-icon>
          <h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR CREDENTIALS BELOW</h1>
        </v-card-title>

     <v-form ref="form" lazy-validation>
        <v-layout xs12 row wrap class="mx-auto" >
          <v-flex xs12>
            <v-text-field
              ref="seller_id"
              :rules="[ v => sellerIdRules(v, index) ]"
              validate-on-blur
              required
              color="indigo"
              label="Amazon Seller Id"
              v-model="creds.seller_id"
              prepend-icon="person"
            ></v-text-field>
          </v-flex>

然后在提交时，我必须为包含此元素的每个元素运行一个方法：

this.$refs.seller_id.forEach(function(element){console.log(element.value)});

有更简单的方法吗？我可以限制refs的范围，以便只使用1个forEach循环。或其他建议？

Answer 1

有几种方法可以解决此问题。

最简单的方法可能是创建应保留输入字段状态的数据属性，并使用prop对其进行初始化。

props: ['value'],

data () {
   return {
      valueLocal: this.value
   }
}

现在，数据属性可用于再次反映您输入字段的值：

<input v-model="valueLocal">

缺点是，如果在安装组件后prop值更改，则这些更改将被您的组件忽略。

但是，您可以使用观察程序扩展组件定义。这样valueLocal始终等于最后更改的内容。道具或用户输入。

props: ['value'],

data () {
   return {
      valueLocal: this.value
   }
},

watch: {
    value (newValue) {
        this.valueLocal = newValue
    }
}

请注意，v-model基本上只是语法糖，用于绑定value属性并侦听input事件。因此v-model只是以下简称：

<input :value="valueLocal" @input="valueLocal = $event.target.value">

因此，您最好保持表单组件的通用性，并让父组件处理状态。

表单组件

您的表单组件模板：

<input :value="value" @input="$emit('input', $event.target.value)">
<!-- ... --->
<input type="submit" @submit="$emit('submit')">

不需要数据属性，仅需要道具

props: ['value']

父项

在父组件模板中：

<form-component :value="value" @input="value = $event" @submit="...">

或再次使用v-model

<form-component v-model="value" @submit="...">

由于您的表单组件中有多个输入元素，因此这不是一个选择。

Vue-有没有办法在表单上限制$ refs的范围

1 个答案:

表单组件

父项