vue.js - v-for 中的 Vuejs 数组输入
问题描述
我有一个关于人员信息的简单表格。我有一个人数,例如 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);
}
}
解决方案
如果我正确理解了您的要求,那么是一种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
元素。只需确保在您的输入元素中也添加这些属性。
推荐阅读
- android - 我看不到从 Flurry 中删除旧版本的能力
- c++ - 包含后未声明“std::filesystem”
- android - 同一开发者如何在多个应用程序之间共享私有数据
- docker - Docker for Windows: Accessing named volume mounts
- c++ - 使用 g++ 的 Mutex 和 condition_variable 编译错误
- gulp - Minifying the conditional statement used in the comments of HTML using gulp
- python - AI MODEL:“ValueError:您正在尝试将包含 190 层的权重文件加载到具有 26 层的模型中。”
- javascript - How to auto-update jupyter notebook extension during development/debugging?
- vb.net - 如何让代码在后台永久运行,等待输入?(Visual Basic)
- java - 等待超时需要帮助