动态V-型号名称2

Question

我正在开发一个应用程序，我使用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工作以及？

Answer 1

要与form.parent_id[n]使用v-model：

1. form应该是一个数据属性。
2. form.parent_id应该是一个数组。

然后你就可以做到以下几点：由具有VUE实例安装像

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

：

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

检查这个fiddle的工作示例。

Answer 2

假设input_name_id是一个字符串，你需要做的是:name="'input_name_id' + n"

下面是一个工作solution