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

Question

我正在开发一个应用程序，我使用 Vue 2 作为 JavaScript 框架，在 v-for 循环内，我需要将循环的计数器绑定(bind)到元素的 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 属性 绑定(bind)有效，但我不知道如何让 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: []
      }
    }
})

检查这个fiddle一个工作示例。