Nuxt.js初心者がv-modelを勉強してユーザ入力に対して動的処理をする

シェアする:

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsでユーザのフォーム入力を受け取りたい人
  • Nuxt.jsでv-modelを勉強したい人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

ひとまずNuxt.jsで作ったサイトを公開しました。

前回の記事で、変数に合わせてページ内の表示を動的に変化させることができるようになりました。

今回はユーザの入力に対して動的に処理する「v-model」というのを勉強したいと思います。

WordPressの上でな!

※ このブログはWordPress製ですが、Nuxt.jsに移行予定です

まずはざっくりとv-model

Vue.js公式では「フォーム入力バインディング」と説明されています。

フォームとありますがJavaScriptで動的に処理するのでページ遷移が不要、つまり<from>タグなしでも動きます。

書き方も非常にシンプルで、この↓ように書くだけです。


<input type="text" v-model="value">

たったこれだけで、変数「value」に入力したテキストが格納され、その変化に対して自動で変数を更新。 さらにこの変数を使用している箇所で自動でイベントが発生し再計算されます。

通常のJavaScriptやjQueryと比較した場合に、これが簡単なのか難解なのかは僕には分かりませんが、このv-modelはめちゃくちゃ分かりやすくて学びやすかったです。

v-model変数の注意点

先ほどのコードの場合、入力した値を変数「value」に格納してくれますが、変数の宣言自体は別で済ませておかなくてはなりません。

変数宣言にはdataメソッドを使います。


data() {
  return {
    value: '',
  }
},

僕と同じくらいの初心者だとこの書き方は受け入れがたいと思うので、詳細は「data return」の記事を見てください。

個人的な話

<チラシの裏>

いやねー!

僕はこのページ遷移なしで表示するのにめちゃくちゃ憧れてたんですよ!

僕が最初に書いたWebのプログラムがFF11のツールだったんですけど、これが2005年の話です。

今の人、PerlとかCGIとかラクダの本とか分かるのかな…。

当時はフォームの一番右側にこんな↓ボタンがあってですね。

「表示」を押すとページをまたいで、計算結果を表示するようになっていました。 数値とか並び替え方法を変更するたびにページをリロードしないといけないんです。

その後もいくつか似たようなことはやってきましたが、PHPに移ってからも同様に「ページ遷移あり」での計算でした。

だから「ページ遷移なし」のJavaScriptが羨ましくて羨ましくて仕方なくて、何度か教科書買ったんですけども、無銘関数とかアロー関数とか変数$とか非同期処理とか見るたびに訳が分からなくなってJavaScriptを遠ざけてきたのです。

そんな僕が!!

学習を始めてから2カ月たらずでFF11のツールをNuxt.jsで復元できました。

見てください。

入力するたびにパパッと一瞬で計算結果が表示されてます。

そうです…僕はこれがやりたかったんです…

遂に来たか、この時が。
この15年間、幾度となくJavaScriptとの戦いを思い出したぞ。

Nuxt.js…というかVue.jsか?

アロー関数とか非同期処理は結局覚えないといけないけど、それ以外の部分がめっちゃ簡単に表現できるのでトータルの学習コストは低いんじゃないかと思います。

現段階でもこんなクイズアプリを作ることができました。

学んだことをほとんど利用できているのと、何より自分でゼロから設計できたのがとても嬉しかったです。

</チラシの裏>

テキストのv-model

上でほとんど書いてしまいましたが、これ↓です。


<input type="text" v-model="value">

変数宣言は忘れずに。


data() {
  return {
    value: '',
  }
},

数値入力の場合は注意が必要

FF11のツールがそうなんですが、数値をテキストで入力させています。

数値以外を受け付けない場合、この↓ように型を「number」にすることで入力制限することができます。


<input type="number" v-model="value">

ですが、この場合にもvalueには文字列として「100」のように入ります。

このままでは値の比較やソートに使う場合、意図しない動作になることがあるので、数値として受け取りたい場合はこの↓ようにnumber修飾子をつけます。


<input type="number" v-model.number="value">

textareaの場合

今回のテストサイトでは使っていませんが、Vue.jsのマニュアルによると<input>と同じように使えるようです。


<textarea v-model="value"></textarea>

チェックボックスのv-model

テキストの場合と同様です。 テストサイトではこのページで利用しました。


<input type="checkbox" v-model="value">

チェックが入るとvalueにtrueが、チェックがないとfalseが入ります。

この↓ように「value」属性を設定した場合はチェックした際にその値が入ります。


<input type="checkbox" value="りんご" v-model="value">

実はこれを利用してすごい面白いことができます。

複数項目のチェック

通常、チェックボックスはラジオボタンと違ってそれぞれが独立しているので、「好きな果物を選びなさい」のような問いに対してチェックボックスで複数選べるようにした場合、「最低1個選ばせる」のような処理をするのにひと手間必要です。

ところがv-modelでは、この↓ように同じv-model変数に対してチェックボックスを作ると、


<input type="checkbox" value="りんご" v-model="fruits">
<input type="checkbox" value="みかん" v-model="fruits">
<input type="checkbox" value="バナナ" v-model="fruits">

変数fruitsには選択したもののvalueの配列が格納されます。

「最低1個」の処理も簡単だし、選択されたものに対するループ処理も楽勝です。

素晴らしい。

true/falseで格納される値の変更

選択に対して、true/false以外にも任意の値を設定できるようです。


<input type="checkbox" true-value="ベジタリアン" false-value="雑食" v-model="value">

何に使うんだろうか…。 ちょっと思いつかないです。

受け取った先でもこれは処理できますしね…。

選択肢のひとつとして覚えておこうと思います。

ラジオボタンのv-model

チェックボックスと書き方は同じです。 テストサイトではこのページで利用しました。


<input type="radio" value="りんご" v-model="fruits">
<input type="radio" value="みかん" v-model="fruits">
<input type="radio" value="バナナ" v-model="fruits">

この例だと選択したもの「value」が「fruits」に入ります。

v-bindを使うと「value」に変数も設定できるみたいです。


<input type="radio" v-bind:value="apple" v-model="fruits">

この場合、この↓「apple」の値が入ります。


data() {
  return {
    apple: '',
  }
},

<select>のv-model

これも似たような感じです。 テストサイトではあっちゃこっちゃで利用しました。


<select v-model="fruits">

<option>でvalueを設定しなかった場合は、中身のテキストが入ります。 この↓場合は「りんご」がはいります。


<option>りんご</option>

valueを指定した場合はvalueの値が入ります(この↓例だと「apple」)


<option value="apple">りんご</option>

ラジオボタン同様にv-bindを使うこともできます。


<option v-bind:value="apple">りんご</option>

テストサイトの「属性」は、APIから属性一覧を取得して、v-forでループ処理しています。

まとめ

今回はユーザからの入力を受け取るv-modelを勉強しました。

「data return」の部分で変数名を宣言して、<input>タグに「v-model="(変数名)"」と書くだけです。

v-modelで受け取った値に対して動的処理をする場合は前回の記事のv-bindやv-ifが使えるのでそっちを見てください。

Vue.jsのテンプレート構文とv-modelが分かれば、大概のことはできると思います。

僕は概ね書きたいことが書けるようになったので、次はAPIの勉強をしようと思います。

以上、WordPressからお届けしました!

Nuxtサイトリリース編の目次

シェアする: