BETA

【Vue.js入門】v-on、v-forを使ってみよう!

投稿日:2018-10-31
最終更新:2018-10-31

Vue.jsの入門で必ず出てくるv-onとv-for

v-onv-forを使うことができれば以下のようなToDoアプリもすぐ作れました!

今回のつまづきいたところ

  • addボタンを押してもページがリロードされる
  • フォームに打ち込んだ文字が消えない

それではVue.jsだけで簡単なToDoアプリを作っていきましょう!

まずは雛形をつくる

まずはJavaScript側。 【初心者向け】Vue.jsの双方向データバインディングと同じ作りをしているため、説明は簡単に書きます。

main.js

(function(){
  "use strict";
  var vm = new Vue({
    el: '#app',
    data: {
      todos: [
        'task1',
        'task2',
        'task3'
      ]
    }
  });
})();

new Vueで新規作成したインスタンスを変数vmに与えます。 HTML側の"id=app"はCSSのセレクタ同様'#app'で呼び出します。 次にdataを用意してあげるのですが、今回は'task'を仮置きしています。 後ほど、この'task'の下にフォームから入力された値を表示できるようにします!

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="app" class="container">
    <h1>My Todo Lists</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo }}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>

</body>
</html>

HTML側ではtitleを「My Vue App」とし、表題に「My ToDo Lists」としています。 ここででてくるv-forでは先程main.jsで書いた、data内の配列todosを一つづつ画面にリストとして表示させるため、

<ul>
  <li v-for="todo in todos" :key="todo.id">{{ todo }}</li>
</ul>

とします。 todosの中のtodoを一個づつfor文で取得しているイメージです。 尚、コメントをいただきましたv-forにはkey指定が推奨されている件ですが、公式ドキュメントを確認し、追記いたしました。

繰り返される DOM の内容が単純な場合や、性能向上のために標準の動作に意図的に頼る場合を除いて、可能なときはいつでも v-for に key を与えることが推奨されます。

雛形は以上です。

ここからv-onが出てきます

まず、HTML側でリストの下に

<!-- <form v-on:submit="addItem"> -->
<form @submit.prevent="addItem">
  <input type="text" v-model="newItem">
  <input type="submit" value="add">
</form>

を追記します。 基本はv-onですが@*で省略も可能です。 *submit(ボタンを押下)した時にnewItemの値をv-on(@submit)というディレクティブを使ってtodosに追加できます。 ここでsubmitしたときのメソッドをaddItemと指定します。

preventで無駄なページリロードを防ぐ

@submitのあとに出てくるpreventリロードを防いでくれます。 これをしないと リストに追加をしてもリロードしてしまって画面上に追加されません。

続いて、main.jsのdata内にnewItem: '',を追加します。

newItem: '',

thisでdata内にアクセスする

data内にはthisを使ってアクセスできます。

},
methods: {
  addItem: function(e){
  this.todos.push(this.newItem);
  this.newItem = '';
 }
}

this.todosで配列にアクセスし、this.todos.pushとした後に(this.newItem)とすることでnewIemがtodosの末尾に追加され、li要素に反映されるようになります。 このままでは、addした後にフォームに値が残ったままになるのでthis.newItem = '';を追加し、配列に値をpushした後はnewItem空文字にすることでフォームに値が残る心配がなくなります。

サンプルもありますのでお試しください!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@QA8SrqqPrVZPs6LSの技術ブログ

よく一緒に読まれる記事

1件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
11/01 12:09

submitをpreventで防いでますがそもそもsubmitを発生させなければいいと思います。
formタグを削除して、addボタンは下記のようにbuttonタグで書くか他のタグで書けばいいはずです。

<button @click="addItem">add</button>
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!