如何将值传递给V模型

Question

我的表单将新产品添加到数据库中。该类别，我想在表格中填写。我使用:value绑定类别，但表格需要v-model发送表单数据。

我知道V-Model的使用覆盖:value的使用。

所以而不是此代码：

<b-form-input v-model="productCategory" :value="category.name />

我正在寻找一种将category.name从v-for对象传递到表格提交时的 productCategory属性的方法。

我找到了以下答案：将输入的值传递给V模型，但我仍然很难找到解决方案。

有人可以帮忙。

编辑 基于@caseyjoneal的答案，我已经编辑了我的问题，以提供更多的洞察力。

定义的属性：

  data() {
    return {
      products: [],
      categories: [],
      category: null,
      name: null,
      price: null,
      productCategory: null,
      productImage: null,
      imageUrl: null,
      description: null,
      selected: "9",
      btwOptions: [
        { value: "9", text: "9% BTW" },
        { value: "21", text: "21% BTW" }
      ]
    }
  }

v-for循环为DB的每个类别加载一个选项卡。每个选项卡都有一个模态，该模态将加载表单以将产品添加到DB中。由于每个类别都有一个选项卡，并且在每个类别中都有一个标签，所以我想预先填写类别字段。

我尝试了@caseyjoneal的建议，但我没有给出希望的结果。没有存储到DB的类别。

<b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
   <b-modal>
     <form>
       <b-form-group label-cols-sm="3" label="Categorie:" label-align-sm="right" label-for="nestedCategory">
        <div hidden>{{category.name}}:{{productCategory[category]}}</div>
        <b-form-input id="nestedCategory" :placeholder="category" v-model="productCategory" readonly/>
        </b-form-group>
     </form>
   </b-modal>
</b-tab>

所以我正在寻找一种解决方案以实现：

<b-form-input id="nestedCategory" v-model="productCategory" :value="category.name readonly/>

Answer 1

要使用v-model，您必须将其放在实际输入元素上。它在组件上不起作用。很难说出最好的解决方案，而无需看到如何在应用程序中组织数据。在v-for循环中，我将使用括号符号为您的productCategory对象添加值。

<div
  v-for="(_, category) in productCategory"
  :key="category"
>  
  {{ category }}: {{productCategory[category] }}
  <input 
    :placeholder="category"
    v-model="productCategory[category]"
  >
</div>

查看此小提琴https://jsfiddle.net/caseyjoneal/vquc04mr/53/