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">...
·
如何动态绑定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);//获取点击输入框的索引
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)