Динамическое имя V-модели в v-for-контуре Vue 2

Я разрабатываю приложение, и я использую Vue 2 в качестве фреймворка javascript, внутри цикла v-for мне нужно, чтобы счетчик цикла был привязан к имени v-model элементов, это мой код:

<div v-for="n in total" class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id['  + n  + ']'" v-model="form.parent_id_n" />
</div>

Мне нужно n быть счетчиком цикла, например, для первого элемента он должен быть:

<div class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>

привязка name attribute работает, но я понятия не имею, как заставить работать v-model?

Ответы

Ответ 1

Чтобы использовать v-model с form.parent_id[n]:

form должен быть свойством data.
form.parent_id должен быть массивом.

Затем вы можете сделать следующее:

<div id="demo">
  <div v-for='n in 3'>
    <input v-model="form.parent_id[n]">
  </div>
  <div v-for='n in 3'>
    {{ form.parent_id[n] }}
  </div>
</div>

с помощью установки экземпляра vue, например:

var demo = new Vue({
    el: '#demo',
    data: {
      form: {
        parent_id: []
      }
    }
})

Отметьте fiddle для рабочего примера.

Ответ 2

Другим способом достижения этого является использование скобочной записи доступа к свойству объекта.

<div v-for="n in total" class="form-group">
   <input type="hidden" 
          id="input_id" 
          :name="'input_name_id['  + n  + ']'" 
          v-model="form['parent_id_' + n ]" />
</div>

Ответ 3

Предполагая, что input_name_id является строкой, вам нужно сделать :name="'input_name_id' + n"

Вот работающий решение

Ответ 4

Повторный текст подан 10 раз и отделен v-моделью для каждого

<v-text-field
  v-for="(n,index) in 10"
  :key="index"
  v-model="pricing.name[n]"
  color="info"
  outline
  validate-on-blur
/>

хранение данных

data() {
    return {
     pricing:{
      name: [],
        }
      }