v-for循环Vue 2中的动态V模型名称

Question

我正在开发一个应用程序,我正在使用Vue 2javascript框架,在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工作呢？

Answer 1

要使用v-model带form.parent_id[n]:

1. form 应该是一个数据属性.
2. 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: []
      }
    }
})

检查这个小提琴是否有一个工作示例.

Answer 2

重复提交 10 次文本并为每个单独的 v-model

<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: [],
        }
      }

Answer 3

实现此目的的另一种方法是使用访问对象属性的括号表示法.

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