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. 【Java深入研究】2、JDK 1.8 LinkedList源码解析

    LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...

  2. 【github&&git】6、SmartGit（试用期30后），个人继续使用的方法。

    在我们做项目的过程中,我们会用到SmartGit这个软件来将本地的MAVEN项目push到国内的码云(https://git.oschina.net)或者是国外的github网站进行项目的管理,这个时 ...

  3. 利用批处理文件删除系统托盘上的图标（适用于Windows各个版本）

    对于我这种强迫症患者来说,如果我已经删除了一些软件,但是系统托盘里面还有它,我会很难受.所以,没办法,必须想办法把它清除掉,还自己一片安宁!!!不知各位是否遇到过和我一样的问题,下面贴一段批处理文件的 ...

  4. CSS--使用伪选择器制作箭头图标

    // 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式: HTML <section class="main&quo ...

  5. js之模态对话框

    目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框. 效果如下 实现代码如下: <!DOCTYPE html> <html lang="en&qu ...

  6. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  7. PDF格式的“在线阅读”和“下载”

    产生背景: 一个需求,用户可在线阅读PDF,也可下载到本地.听需求来源说人家的网站上的可以做,问我们能做吗,需要这个功能,就要来了网址,看看页面. 问题:上传PDF文件后,发现访问地址在浏览器上打开, ...

  8. JS点击按钮下载文件

    通过form表单提交: 由于ajax函数的返回类型只有xml.text.json.html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接 ...

  9. python总结（更新中）

    1 python函数中的参数传递(注意可变和不可变传递) 可更改(mutable)与不可更改(immutable)对象 在 python 中,strings, tuples, 和 numbers 是不 ...

  10. Kotlin入门(19)Android的基础布局

    线性布局线性布局LinearLayout是最常用的布局,顾名思义,它下面的子视图像是用一根线串了起来,所以其内部视图的排列是有顺序的,要么从上到下垂直排列,要么从左到右水平排列.排列顺序只能指定一维方 ...