如何将值传递给 v-model？

Question

我有一个向数据库添加新产品的表单。类别，我想预先填写表格。我使用:value绑定类别，但是表单需要v-model发送表单数据。

我知道 v-model 的使用会覆盖 :value 的使用。

所以代替这段代码：

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

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

我找到了这个答案：Pass value of input to v-model，但我仍然无法找到解决方案。

有人可以帮忙吗。

编辑基于@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 循环为数据库中的每个类别加载一个选项卡。 每个选项卡都有一个模式，其中加载一个表单以将产品添加到数据库。由于每个类别都有一个选项卡，每个类别都有一个模式，我想预先填写类别字段。

我尝试了@caseyjoneal 的建议，但没有给出预期的结果。没有类别存储到数据库中。

<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/