时间戳

首页 > 解决方案 > Vue js 动态 v-model 用于使用 v-for 呈现的表单

dynamic - Vue js 动态 v-model 用于使用 v-for 呈现的表单

问题描述

我有 1 个复选框组和 9 个单选按钮组，每个组都需要 v-model，但我不知道如何在其中放置 9 个不同的数据属性。

我的数据如下所示：

数据（）{返回{

servicesId：[]，personId：''，incomeId：''，extraIncomeId：''，pdvId：''，paymentId：''，clientId：''，cashRegisterId：''，eBankingId：''，

} }

在模板中是这样的：

 <div  v-for="data in formData" :key="data.id">
  <h5>{{data.question_text}}</h5>
  <div class="form-check" v-for="text_o in data.question_options" :key="text_o.id">
    <input  class="form-check-input"   
     :type="data.question_type.type" 
     :value="text_o.id" :id="text_o.id"
     v-model="[HERE GOES "9 "data props"]">

   <label  class="form-check-label"  :key="text_o.id" :for="text_o.id"> {{text_o.option_text} 
   </label>
  </div>
 </div>

这是formData数组的一部分（因为它很长，如果需要，我可以从中发布所有内容）：

   {
        "id": 1,
        "question_type_id": 1,
        "title": "new ent",
        "question_text": "Planirate da se bavite:",
        "created_at": "2021-10-12T13:42:17.000000Z",
        "updated_at": "2021-10-12T13:42:17.000000Z",
        "question_options": [
            {
                "id": 1,
                "question_id": 1,
                "option_text": "Uslugama",
                "price": 40,
                "created_at": "2021-10-12T13:44:40.000000Z",
                "updated_at": "2021-10-12T13:44:40.000000Z"
            },
            {
                "id": 2,
                "question_id": 1,
                "option_text": "Trgovinom",
                "price": 60,
                "created_at": "2021-10-12T13:46:53.000000Z",
                "updated_at": "2021-10-12T13:46:53.000000Z"
            },
            {
                "id": 3,
                "question_id": 1,
                "option_text": "Proizvodnjom",
                "price": 80,
                "created_at": "2021-10-12T13:47:22.000000Z",
                "updated_at": "2021-10-12T13:47:22.000000Z"
            }
        ],
        "question_type": {
            "id": 1,
            "type": "checkbox",
            "created_at": "2021-10-12T13:40:17.000000Z",
            "updated_at": "2021-10-12T13:40:17.000000Z"
        }
    }

Thanks.

标签： dynamicvuejs2v-model

解决方案

如果您希望您的值成为数据的一部分，您可以创建一个包含表单数据的对象，如下所示：

data() {
  return {
    formValue: {
      servicesId: [],
      personId: "",
      incomeId: "",
      extraIncomeId: "",
      pdvId: "",
      paymentId: "",
      clientId: "",
      cashRegisterId: "",
      eBankingId: "",
    },
  }
}

添加该对象后，只需为您的表单数据对象添加一个名称，如下所示：

  formData: [
    {
      id: 1,
      question_type_id: 1,
      title: "new ent",
      question_text: "Planirate da se bavite:",
      created_at: "2021-10-12T13:42:17.000000Z",
      updated_at: "2021-10-12T13:42:17.000000Z",
      name: "servicesId",   <-- modified part
      question_options: [...]
    }
  ]

现在您可以使用该名称动态访问作为数据一部分的 formValue 对象：

 <div v-for="data in formData" :key="data.id">
      <h5>{{ data.question_text }}</h5>
      <div
        class="form-check"
        v-for="text_o in data.question_options"
        :key="text_o.id"
      >
        <input
          class="form-check-input"
          :type="data.question_type.type"
          :value="text_o.id"
          :id="text_o.id"
          v-model="formValue[data.name]"   <-- modified part
        />

        <label class="form-check-label" :key="text_o.id" :for="text_o.id">
          {{ text_o.option_text }}
        </label>
      </div>
    </div>

希望这种方法对您有所帮助，您将在数据中拥有您的值，它们不会作为单独的属性存在，但它们将成为名为的包装器对象的一部分formValue

推荐阅读