vue 如何在循环中绑定v-model

时间:2022-12-27 08:43:17

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上效果

注意:查看github效果的时候,可以新增几项,然后可以留几项不输入任何值,直接点击提交按钮,会弹出第几行输入框的值没有填写了;我们也可以在控制台中打印出 this.arrs 的值。

vue 如何在循环中绑定v-model的更多相关文章

  1. vue在v-for循环中绑定v-model

    原始示例 <div v-for="item in items"> <input type="text" v-model="'good ...

  2. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  3. 关于在for循环中绑定事件打印变量i是最后一次。

    其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...

  5. Vue循环中多个input绑定指定v-model

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...

  6. 每天一点点之vue框架开发 - vue-router路由在循环中携带参数

    场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...

  7. vue之单表输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  8. vue 之 表单输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  9. vue表单输入的绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

随机推荐

  1. orancle的安装和配置

    1.安装 Oracle 版本:Oracle Database 10g Release 2 (10.2.0.1) 下载地址: http://www.oracle.com/technology/softw ...

  2. Python好用的网站收集

    第三方Pthon包查找:http://www.lfd.uci.edu/ http://www.cnblogs.com/lanxuezaipiao/p/3543658.html

  3. 奇怪的cab&lowbar;xxxx&lowbar;x文件

    最近一段时间发现C盘老是提示空间紧张(显示为红色),之前清理了一次系统盘的\Windows\Temp文件夹,发现了很多文件名类似cab_xxxx_x的cab文件,大概占用了五六个G的空间,当时没太在意 ...

  4. Java 装箱 拆箱

    Java 自动装箱与拆箱   ??什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象的时候,我 ...

  5. Firefly官方教程之DBentrust使用文档

    原地址: http://bbs.gameres.com/thread_224185.html 1.dbentrust说明该模块主要是对数据库与memcached存储的处理.里面封装了从memcache ...

  6. 【SVN Working copy is too old &lpar;format 10&comma; created by Subversion 1&period;6&rpar;】解决方式

    SVN同步或者提交的时候出现类似错误信息: The working copy needs to be upgraded svn: Working copy 'D:\adt-bundle-windows ...

  7. 策略模式——MFC样例

    Context(应用场景): 1.须要使用ConcreteStrategy提供的算法. 2.内部维护一个Strategy的实例. 3. 负责动态设置执行时Strategy详细的实现算法. 4.负责跟S ...

  8. c&num;4&period;8-4&period;11学习总结

    4.8讲的是static 关键字.它用于修饰类 ,字段 ,属性,方法和构造方法等.被它修饰的类称为静态类,成员称为静态成员.  先说静态字段,它是普通字段前面加个static,它不属于任何对象,只属于 ...

  9. R包的小技巧

    通常我们都是直接使用library(pkg_name)  的形式加载R包,在同一台机器上面,对于我们而言,这个包所在的路径一定是在.libPaths() 路面的,但是对于其他用户而言,这个路径可能不存 ...

  10. 深入浅出TCP之半关闭与CLOSE&lowbar;WAIT

    转自:https://www.2cto.com/net/201309/243585.html(相关链接) 深入浅出TCP之半关闭与CLOSE_WAIT 终止一个连接要经过4次握手.这由TCP的半关闭( ...