Vue循环中多个input绑定指定v-model实例
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢
这里介绍两种：
一种是v-for中循环生成的输入框,
一种是在element-table中生成的输入框
在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2..
类似这样的,这样就可以通过绑定的值取到对应输入框的值了,
在控制台打印的结果:
还有一种场景是在表格中嵌套的input:
这样的只用绑定表格的属性就好了,这样在打印出来的tableData中就可以拿到input的值
补充知识：Vue.js 关于v-for动态绑定v-model，并实时获取input输入值和索引
如何动态绑定V-model
今天在尝试绑定的时候出来很多问题，而找了很多博客，描述的比较乱。
于是记录一下我的解决方法
动态绑定V-model
<el-form> <el-form-item v-for="(item,index) in form" :key="index" :label="item.title"> <el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input> </el-form-item> </el-form>
data() {
return {
form: [
{
title: "用户名",
placeholder: "输入用户名",
modelName:'h'
},
{
title: "密码",
placeholder: "输入密码",
modelName:'2'
},
{
title: "确认密码",
placeholder: "再次输入密码",
modelName:'3'
}]
};
}
其实v-for动态绑定model和绑定其他元素没有大多差别，只要一点需要注意一下，正常动态绑定需要在属性前加：（v-on）这个语法糖，唯独绑定v-model时不用添加，在写的时候也是纠结了半天，至于原因我还没有查找，希望有评论大神指出。
获得键盘实时输入的值和input输入框的索引
输入值实时获取
<el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>
通过@input.native来监听输入框实时输入的值，注意：需要添加.native后缀。
VUE官网有相应解释（链接）
获得索引
methods: {
change: function(e,index) {
console.log(e.target.value);//实时获取输入值
console.log(index);//获取点击输入框的索引
}
}
以上这篇Vue循环中多个input绑定指定v-model实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在最近的一个项目中我需要实现表格的翻页,并且还要实现全选、多选功能,下面这篇文章主要给大家介绍了关于vue如何基于el-table实现多页多选及翻页回显过程的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了使用github部署前端vue项目过程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue.js编译时给生成的文件增加版本号，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue keep-alive中的生命周期,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了Vue如何实现组件的源码解析，组件继承分为两大类，全局组件和局部组件，有兴趣的可以了解一下2017-06-06
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了Vue Mint UI mt-swipe的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue中的 DOM与Diff详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
这篇文章主要介绍了vue实现的组件兄弟间通信功能,结合实例形式分析了vue兄弟组件间通信的原理与相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论