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

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应该是一个数组。

然后，您可以执行以下操作：

<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

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

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

Answer 3

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

这是一个有效的解决方案

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

Answer 5

当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。 类似地，Vue.js 无法接受这些更改。 始终使用 Array 实例方法修改数组，或完全替换它。 Vue 提供了一个方便的方法 arr.$set(index, value) ，它是 arr.splice(index, 1, value) 的语法糖。

这段代码对我有用：

HTML

<input type="number" @input="updateValue($event, i, 'pci')" :value="form.neighbours[i].pci" />

JS

        updateValue(event, i, key) {
            const neighbour = {...this.form.neighbours[i]};
            neighbour[key] = event.target.value;
            this.form.neighbours.splice(i, 1, neighbour)
        }