v-for中的Vuejs数组输入

Question

我有一个关于个人信息的简单表格。我有一个人数，例如3。我需要发送这样的json:

{
persons[0].surname: '',
persons[0].name: '',
persons[0].something'',
persons[1].surname: '',
persons[1].name: '',
persons[1].something'',
persons[2].surname: '',
persons[2].name: '',
persons[2].something'',
}

我把我的表格设置成这个

<template v-for="(person, person_index) in people">
<input type="text" placeholder="surname">
<input type="text" placeholder="name">
<input type="text" placeholder="something">
</template>

和我的数据：

data() {
return {
persons: [],
people: 3
},
methods: { 
save(){
console.log(this.persons);
} 
}

Answer 1

如果我正确理解了您的要求，那么有一种方法可以用输入元素的值更新persons对象。

在Vue中，这是使用Vue.set(object, key, value)方法来完成的。代码中：

methods: { 
save: function (){
this.$set(this.persons, index, value); //for Vue 2.x
console.log(this.persons);
} 
}

或

methods: { 
save: function (){
Vue.set(this.persons, index, value) //for Vue 1.x
console.log(this.persons);
} 
}

其中index和value对应于input元素。只需确保在输入元素中也添加这些属性即可。