Как передать значение в 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, вы должны поместить его в фактический элемент ввода.Это не будет работать на компоненте.Трудно сказать, какое решение лучше для вас, не видя, как ваши данные организованы в вашем приложении.Я бы использовал скобочные обозначения для добавления значения к вашему productCategory объекту в цикле v-for.

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