vue绑定动态id

最新推荐文章于 2025-06-05 16:51:44 发布

原创最新推荐文章于 2025-06-05 16:51:44 发布 · 2.9w 阅读

9 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在Vue中使用v-for动态生成表单元素的方法，并通过v-model实现了数据的双向绑定，简化了对输入框值的获取过程，提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：使用vue中的v-for循环动态的添加input，在编辑的时候需要获取input的id进而获取编辑值传入后台。由于通过:id传入的id有可能空值，因此我采用了拼接的方式将属性值和下标index拼接在一起做为id，成功解决空值问题。

html代码：

<el-form-item label="姓名：">
	<div>
		<el-input v-model="dialogTable.name" placeholder="姓名" style="width:200px;"></el-input>
		<el-button @click="add">新增</el-button>
	</div>
	<div v-model="this.dialogTable.lists">
		<div v-for="(item, index) in this.dialogTable.lists" :key="index" >
			<el-input :id="nameId(item,index)" :value="item.name" style="width:200px;" @change="editNmae(item,index)"></el-input>
			<el-button @click="delete(index)">删除</el-button>
		</div>
	</div>
</el-form-item>

js代码：

var editName = function(item,index) {
	/*var name = $('#'+item.name).val();*///此处不用这种方式获取id值，是因为id可能为特殊字符，比如逗号分号
	var id = nameId(item,index);
	var name = document.getElementById(id).value;
	this.dialogTable.lists[index].name = name;
}

var nameId = function(item,index) {
	if(item.name == null){
		return index+"name";
	}else{
		return item.name+index;
	}
}

var add = function() {	
		this.dialogTable.lists.push(
				{name:this.dialogTable.name});}
	this.dialogTable.name = undefined;
}

回头看的时候恍然大悟，大费周折实现的效果，使用vue的v-model绑定便可以实现

<el-form-item label="姓名：">
	<div>
		<el-input v-model="dialogTable.name" placeholder="姓名" style="width:200px;"></el-input>
		<el-button @click="add">新增</el-button>
	</div>
	<div v-model="this.dialogTable.lists">
		<div v-for="(item, index) in this.dialogTable.lists" :key="index" >
			<el-input v-model="item.name" style="width:200px;"></el-input>
			<el-button @click="delete(index)">删除</el-button>
		</div>
	</div>
</el-form-item>