Vue.jpでデータを配列データに追加しリスト表示する方法

2017/03/29

前回はVue.jpで、テキストボックスに文字をタイピングするたびに別の場所に文字が現れる方法を紹介しました。

今回は、テキストボックスに入力したデータを配列データに追加し、その配列データをリスト表示する方法を紹介します。

[ad#top-1]

まずは今回の完成形

今回の完成形の動きを動画でお見せします。

TitleとURLのテキストボックスに値を入力すると上のリストに追加されます。裏ではもともと存在する２つの配列データを持っていて、それに突っ込んだと同時に表示させるようになっています。

ソースコード

ソースコードはこちら。

最初は２つの配列データ（items）があって、まずはそれを表示させておいて、テキストボックスに入力してボタンを押すと、そのデータがitemsに追加されます。それと同時に表示も細心に更新されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue.js Demo</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items">
        {{ item.title }} - {{item.url}}
      </li>
    </ul>
    Title: <input v-model="addTitle"><br />
    URL: <input v-model="addURL"><br />
    <button v-on:click="add">add</button><br />
  </div>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var example1 = new Vue({
      el: '#app',
      data: {
        items: [
          { title: 'Google', url: 'http://www.yahoo.co.jp/' },
          { title: 'Yahoo!', url: 'https://www.google.co.jp/' }
        ],
        addURL : 'http://',
      },
 
      methods: {
        add: function (event) {
          this.items.push({ title: this.addTitle, url: this.addURL })
          this.addTitle = '';
          this.addURL = 'http://';
        }
      }
    })
  </script>
</body>
</html>

Vue.jsの特徴として、HTMLタグに<li v-for=”item in items”>と、v-forを使うと、配列の要素数だけループしてくれるという点です。

JavaScript側でループしない分、コードがシンプルになります。

[ad#ad-1]