vue 如何在迴圈中繫結v-model

龍恩0707發表於2018-04-04
Vue

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 的值。

相關文章