vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model
我现在有这么一个需求，页面上有多项输入框，但是具体有多少项，我也不知道，它是通过"新增一项"按钮点击事件，点击一下，就新增一项；如下图这个样子；
代码如下：
<ul class="list">
<li>
<label>第1项</label>
<input type="text" v-model="item1" />
</li>
<li>
<label>第2项</label>
<input type="text" v-model="item2" />
</li>
</ul>
<button @click="newadd">新增一项</button>
我希望的是，如上代码 v-model="item1", item2, 依次类推 ... item(n);
当我们点击提交按钮的时候，我们需要判断input输入框是否有值，没有值的话，不允许提交等等这些操作。这些东西我们可以通过 v-model来判断；
所以我当初的设计是想，想通过这样循环来给v-model设置不同的值：
<li v-for="(item, index) in items">
<label>第{{index+1}}项</label>
<input type="text" v-model="'item'+(index+1)" />
</li>
但是这样弄，vue就会报错了，或者v-model不生效等等这些问题的产生，它会直接把 item2等显示在input输入框内，所以这种方法目前还未想到解决的方法，但是我们可以换一种方式去考虑的。
最终方案是：
1. 首先在data里面定义如下字段：
data: {
count: 1,
arrs: [{'value': 1, 'customItem': ''}]
},
count: 1, 含义是某一项是从1开始的。
arrs: [{'value': 1, 'customItem': ''}]， 含义是template内会循环这个数组 arrs, 页面中默认有一项。
2. 然后每次新增的时候，会调用newadd方法：
newadd() {
this.count++;
this.arrs.push({'customItem': '', 'value': this.count});
},
其中 customItem 可以理解为 v-model的每一项值，因此在我们提交的时候，我们只需要循环数组 this.arrs来判断第几行输入框input没有值，就提示下用户哪项没有值了。
因此所有的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
ul,li {list-style: none;}
.list {float: left; width:200px;}
button {float:left; margin-top:18px;}
</style>
</head>
<body>
<div id="app">
<div style="width:100%;overflow:hidden;">
<ul class="list">
<li v-for="(item, index) in arrs">
<label>第{{index+1}}项</label>
<input type="text" v-model="item.customItem" />
</li>
</ul>
<button @click="newadd">新增一项</button>
</div>
<div style="width:100%;margin-left:40px;overflow:hidden;">
<button @click="comfirm">提交</button>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
count: 1,
arrs: [{'value': 1, 'customItem': ''}]
},
methods: {
newadd() {
this.count++;
this.arrs.push({'customItem': '', 'value': this.count});
},
comfirm() {
for (let i = 0; i < this.arrs.length; i++) {
var item = this.arrs[i];
if (!item.customItem) {
alert('第'+(i+1)+'项不能为空');
return;
}
}
}
}
})
</script>
</html>
注意：查看github效果的时候，可以新增几项，然后可以留几项不输入任何值，直接点击提交按钮，会弹出第几行输入框的值没有填写了；我们也可以在控制台中打印出 this.arrs 的值。
vue 如何在循环中绑定v-model的更多相关文章
- vue在v-for循环中绑定v-model
原始示例 <div v-for="item in items"> <input type="text" v-model="'good ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- 关于在for循环中绑定事件打印变量i是最后一次。
其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
- Vue循环中多个input绑定指定v-model
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...
- 每天一点点之vue框架开发 - vue-router路由在循环中携带参数
场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...
- vue之单表输入绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue 之 表单输入绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue表单输入的绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
随机推荐
- (1)Microsoft office Word 2013版本操作入门_常用功能区
word2013界面做了比较大的优化,刚开始用的时候不太习惯,研究了一下win10下word的新版本,记录以下几个功能小技巧: 1.常用功能区: 新打开一个word文档 文件.开始 .插入 等菜单称 ...
- Class<?> getClass()
getClass()方法属于Object的一部分,它将产生对象的类,并且在打印该类时,可以看到该类类型的编码字符串,前导"["表示这是一个后满紧随的类型的数组,而紧随的" ...
- Is the “*apply” family really not vectorized?
Question: So we are used to say to every R new user that "apply isn't vectorized, check out the ...
- 网页三剑客：HTML+CSS+JavaScript 之CSS概述
CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是 ...
- VUE axios 发送 Form Data 格式数据请求
axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换.Payload 和 Form Data 的主要设置是根据请求头的 C ...
- 排错-安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法
安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法 by:授客 QQ:1033553122 在Windows Server 2008安装SQL Server 2008出现的问 ...
- 《Inside C#》笔记(六) 属性、数组、索引器
一 属性 a) 属性可用于隐藏类的内部成员,对外提供可控的存取接口.属性相当于有些语言的getter.setter方法,只是使用起来更加方便一点,而且查看对应的IL码可以看到,属性的本质也确实是方法. ...
- Azure Ubuntu18.04安装lxde桌面记录,Windows远程连接Ubuntu18.04(Linux)
执行如下命令: 尽量按以下顺序执行,否则可能会发生意向不到的问题(坑) 1.更新数据源 sudo apt-get update 2.更新安装包 sudo apt-get upgrade 3.安装lxd ...
- C# show和showdialog区别
简单地说他们的区别就是show弹出来的窗体和父窗体(上一个窗体的简称)是属于同一等级的,这两个窗体可以同时存在而且可以随意切换,但是showdialog弹出来的窗体就不能这样,他永远是被置顶的,如果不 ...
- 【Alpha - 五成胜算队】博客列表
一. 团队Alpha冲刺博客 [Alpha 冲刺] 1/12 [Alpha 冲刺] 2/12 [Alpha 冲刺] 3/12 [Alpha 冲刺] 4/12 [Alpha 冲刺] 5/12 [Alph ...