javascript - 如何向 v-model 传递值？

Question

我有一个将新产品添加到数据库的表单。我想预先填写表格的类别。我用:value绑定(bind)类别但表单需要 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>

看看这个 fiddle https://jsfiddle.net/caseyjoneal/vquc04mr/53/