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