如何將值傳遞給v模型？

Question

我有一個將新產品添加到數據庫的表單。 我要預先填寫該類別。 我使用:value綁定類別，但是表單需要v-model來發送表單數據。

我知道v模型的使用會覆蓋: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循環為數據庫中的每個類別加載一個選項卡。 每個選項卡內部都有一個模式，該模式可加載一個表單以將產品添加到數據庫中。 由於每個類別都有一個選項卡，每個類別中都有一個模式，因此我想對類別字段進行預填充。

我已經嘗試過@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/