Javascript 如何在vue js中创建多行表单？

这是我的表格：

    <card-wrapper
      v-for="(passenger, index) in form.passenger"
      :key="index"
      :icon="['fas', 'user']"
      :title="`Passenger ${index + 1}`"
      class="mb-5"
    >
      <validation-observer
        :ref="`passengerForm${index + 1}`"
        tag="div"
        class="row"
      >
        <b-col cols="12" class="mb-3">
          <b-row>
            <b-col lg="4" cols="12">
              <validation-provider
                v-slot="{ errors }"
                rules="required"
                name="First name"
                tag="div"
              >
                <form-text
                  id="first-name"
                  v-model="passenger.first_name"
                  :icon="['fas', 'user']"
                  :errors="errors[0]"
                  placeholder="First name"
                  tabindex="0"
                  class="mb-4"
                />
              </validation-provider>
            </b-col>

            <b-col lg="4" cols="12">
              <validation-provider
                v-slot="{ errors }"
                rules="required"
                name="Last name"
                tag="div"
              >
                <form-text
                  id="last-name"
                  v-model="passenger.last_name"
                  :icon="['fas', 'user']"
                  :errors="errors[0]"
                  placeholder="Last name"
                  tabindex="0"
                  class="mb-4"
                />
              </validation-provider>
            </b-col>
....

      form: {
        type: 'InvitationLetter',
        status: 'real',
        code: '',
        price: 18,
        gender: '',
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        destination1: '',
        destination2: '',
        social_media: [],
        options: [],
        passenger: [
          {
            gender: '',
            first_name: '',
            last_name: '',
            nationality: '',
            birth_date: '',
            passport_expiry_date: '',
            passport_number: '',
            travel_insurance: ''
          }
        ]
      }

如你们所见，我在乘客阵列上运行v-for循环。在从服务器获取数据并且我想编辑表单之前，一切都正常。当我在上编辑字段时，会收到以下错误消息：

[vuex]不要在变异处理程序之外变异vuex存储状态

我在我的页面组件中获取数据：

 computed: {
    ...mapGetters({
      result: 'invitationLetter/getData'
    }),
  created() {
    Object.keys(this.result).length !== 0 && this.setFormData()
  },
  methods: {
   setFormData() {
      this.count = this.result.passenger.length

      const NAME = this.result.name.split('-')
      const KEYS = Object.keys(this.form)

      KEYS.forEach((item) => {
        if (item !== 'firstName' && item !== 'lastName') {
          this.form[item] = this.result[item] ? this.result[item] : ''
        }

        ;[this.form.firstName, this.form.lastName] = [NAME[0], NAME[1]]
      })
    }
  }

页码/邀请函/_id.vue

我在表单组件中设置表单数据：

 computed: {
    ...mapGetters({
      result: 'invitationLetter/getData'
    }),
  created() {
    Object.keys(this.result).length !== 0 && this.setFormData()
  },
  methods: {
   setFormData() {
      this.count = this.result.passenger.length

      const NAME = this.result.name.split('-')
      const KEYS = Object.keys(this.form)

      KEYS.forEach((item) => {
        if (item !== 'firstName' && item !== 'lastName') {
          this.form[item] = this.result[item] ? this.result[item] : ''
        }

        ;[this.form.firstName, this.form.lastName] = [NAME[0], NAME[1]]
      })
    }
  }

如前所述，表单字段将被填充，但当我尝试更改一个数据（更改输入）时，我将收到错误消息：

[vuex]不要在变异处理程序之外变异vuex存储状态

这是从服务器获取数据后的我的表单：

---

您的

setFormData

方法不是必需的，并且正在导致错误。您应该将

表单

数据保存在

存储

中，在父组件中以getter的形式提取它，在父组件中使用v-for，并仅通过突变在

存储

中更新它的值。Vue将自动更改组件中的数据

---

您的

setFormData

方法不是必需的，并且正在导致错误。您应该将

表单

数据保存在

存储

中，在父组件中以getter的形式提取它，在父组件中使用v-for，并仅通过突变在

存储

中更新它的值。Vue将自动更改组件中的数据

---

如果我想绑定输入，我应该为每个输入编写getter和setter。我不想这样，你为什么不这样做？恐怕这是推荐的方式。你不需要为每个setter构建单独的突变。您可以为

乘客

构建一个变异，只需将newValue和propertyName作为有效负载的键传递给每个属性，即可对

乘客

进行操作。这是个好习惯。但是，如果您从getter

$store.getters.form.passenger

传递对象，那么v-model

passenger.someProperty

仍然可以工作。但这不是推荐的做法。如果我想绑定我的输入，我应该为每个输入编写getter和setter。我不想这样，你为什么不这样做？恐怕这是推荐的方式。你不需要为每个setter构建单独的突变。您可以为

乘客

构建一个变异，只需将newValue和propertyName作为有效负载的键传递给每个属性，即可对

乘客

进行操作。这是个好习惯。但是，如果您从getter

$store.getters.form.passenger

传递对象，那么v-model

passenger.someProperty

仍然可以工作。但这不是推荐的做法。