vue遍历生成的输入框 绑定及修改值示例
更新时间：2019年10月30日 10:55:19 作者：StevenDIY
今天小编就为大家分享一篇vue遍历生成的输入框 绑定及修改值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作。这种操作的难点在于生成数量的不确定，不能在在组件中的data直接定义。
思路
获取生成的输入框数量
初始化数组，数组的长度与待绑定输入框数量一致
将每一个输入框的v-model与数组特定项进行绑定
实现代码
1.data中定义一个存放model值的空数组
data() {
return {
inputData :[]
}
}
2.将获取到的数组遍历，将获取到的值插入空数组
res.data.rows.map(v. => {
this.inputData.push(v.desc)
})
3.在template模板代码的输入框通过索引绑定数组的特定项
<el-input
v-model="inputData[index]"
placeholder="请输入内容"
clearable
size="small"
/>
以上这篇vue遍历生成的输入框 绑定及修改值示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue富文本插件(quill-editor)的使用及说明，具有很好的参考价值，希望对大家有所帮助。2023-02-02
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
这篇文章主要介绍了vue中全局路由守卫中替代this操作(this.$store/this.$vux)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue3 $attrs和inheritAttrs的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue常用API、高级API的相关总结，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了学习Vue中必掌握的重点知识，想了解vue的同学可以参考下2021-04-04
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
将 HTML 转换为 PDF 进行下载是一个比较常见的功能,这篇文章将通过html2PDF实现将页面内容导出为PDF,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了详解vue3.0 diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了Vue.js中el-table表格自定义列控制与拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论