input入力内容の変数へのバインドと@clickイベントハンドリング／NUXT自己流チュートリアル（１）－３

今回は、テキストボックス（Input）への入力バインドと、@clickを使ったイベントハンドリングとメソッドの呼び出しと画面の部分更新などをやってみます。

f:id:arakan_no_boku:20190509225706p:plain

この記事は「NUXT自己流チュートリアル（１）」として続き物で書いている記事の３回目です。

1回目から続けて読んでもらえることを想定して書いていますのでご了承ください。

arakan-pgm-ai.hatenablog.com

事前に頭にいれといたほうがいいこと

今回は、テキストボックスなどの入力部品の入力内容を、javaScriptで処理します。

そのためには、入力部品と値を格納する変数との紐づけと、処理（JavaScriptの関数）を実行するトリガになるイベントの取得が必要です。

Nuxt.jsでは、変数との紐付けには、Vue.jsのv-modelディレクティブを使います。

イベントの取得とjavaScript関数との紐付けも、Vue.jsのv-onディレクティブを使えるのですが、もう一つ省略形として「@」も使えます。

今回は、onClickイベントを対象にするので。

v-on:click
@click

の2種類が使えるということです。

今回は「v-on:click」を使ってますが、Nuxt.jsのサンプルには「@click」を使ったものが多いので、そちらに変更してもまったく同じに動きます。

あと、イベントに紐づいて動かすJavaScript関数は「methods:」ブロックの中に書くのがルールです。

初期化の時の「computed：」ではないので、注意します。

今回の記事の前提的なこと

自己流チュートリアル（１）で「前提」と「チュートリアルの準備」として書いていることは、できている必要があります。

つまり。

インストール・環境設定・テスト専用Chromeショートカットの作成うんぬんですね。

まだの方は、下記記事を先に参照して、環境設定をお願いします。

arakan-pgm-ai.hatenablog.com

今回やること

NUXT自己流チュートリアル（２）で郵便番号固定でWEB-APIからデータの取得・表示を「about.vue」というソースでやりました。

今回は、そのabout.vueを修正して、郵便番号をテキストボックスに入力して、ボタンを押したときに、住所情報を取得するように変更します。

そこで、新たに必要になるのは。

画面表示および入力値受取用の変数の宣言と初期化
入力値を変数におさめる（フォーム入力バインディング）
ボタンにイベントトリガ（@click）をつけて、住所取得メソッドを実行させる。
methodsで住所取得メソッドを定義し、パラメータを受け渡す。
画面の住所情報表示を部分更新する。

みたいなことです。

バリデーションとかは今回はやりません。

どんな入力画面にでも必要になる超基本の部分だけ、まずはやってみます。

今回、Scriptタグ内で使う機能

今回、新たに使うのは以下です。

状態	意味と使いわけ
methods	JavaScriptの関数を定義します。ここで定義した関数は@clickなどのイベントに紐づけて実行できます。

状態

意味と使いわけ

methods

JavaScriptの関数を定義します。

ここで定義した関数は@clickなどのイベントに紐づけて実行できます。

利用法のサンプルは、コード例に書くので割愛します。

ソースコードです

基本的にNUXT自己流チュートリアル（２）のソースを引き継ぐ前提です。

郵便番号処理の「about.vue」だけを変更して、他はいじりません。

前回は郵便番号固定でしたが、今回はテキストボックスをおいて、そこに郵便番号を入力してボタンを押した時に、住所情報を取得しにいって結果を表示する・・というように変更します。

修正後のソース全体がこちらです。

pages/about.vue

<template>
  <div>
    <NLink to="/">
      ルートのページへ戻ります
    </NLink>
    <br>
    <img src="/post.JPG" alt="image02">
    <br>
    <input v-model="zip" placeholder="郵便番号を入力する">
    <br>
    <button @click="getAddr({zip})">
      住所情報取得
    </button>
    <div v-if="datas != null">
      <p>郵便番号APIから応答がありました</p>
      <ul v-if="datas.status == 200">
        <li>郵便番号：{{ datas.results[0].zipcode }}</li>
        <li>都道府県名：{{ datas.results[0].address1 }}</li>
        <li>市区町村名：{{ datas.results[0].address2 }}</li>
        <li>町域名：{{ datas.results[0].address3 }}</li>
      </ul>
      <ul v-else>
        <li>指定の郵便番号では住所情報の取得ができませんでした。</li>
      </ul>
    </div>
    <div v-else>
      <p>郵便番号を入力してボタン「住所情報取得を押します。</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      zip: '',
      datas: null
    }
  },
  asyncData () {

  },
  methods: {
    async getAddr ({ zip }) {
      const url = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&limit=1`
      await axios.get(url)
        .then((res) => {
          this.datas = res.data
        })
      return this.data
    }
  },
  head: {
    title: 'About page'
  }
}
</script>

ポイントを補足していきます。

画面表示および入力値受取用の変数の宣言と初期化

以下の部分で初期化しています。

  data(){
    return{
      zip:'',
      datas:null
    }
  },

zipは、テキストボックスの入力値を受け取る変数です。

datasは、郵便番号APIからのレスポンス（JSON)を収めるオブジェクトですが、今回は最初から表示するわけではないので、nullで初期化しています。

<templete>内で使う変数は、ここで定義して初期値を与えておかないと、なんやかんやとエラーがでて実行できません。

ちなみに、asyncData(){}は今回必要ないので空っぽにしてます。

注意が必要なのは、<templete＞内で「datas」を参照しているところです。

たとえば、「datas.results[0].zipcode」とかみたいな。

初期値の時点では「datas」はNULLなので、当然ながら、そのメンバーはありません。

なので、そこを通ってしまうとエラーになるので、到達しないように

<div v-if="datas != null">

というDIVタグを置いて、下に流れないようにする必要があります。

入力値を変数におさめる（フォーム入力バインディング）

上記で定義した変数を、入力フォームに関連づけるのはv-modelです。

<input v-model="zip" placeholder="郵便番号を入力する">

こんな感じでやっとくと、入力された文字列や値が「zip」に格納されます。

日本語IMEの場合は変換が確定したとき、半角英数字などIMEを使わない場合は、入力とほぼ同時に変数（今回はzip）に格納されていきます。

ボタンにイベントトリガ（@click）をつけて、住所取得メソッドを実行させる。

ボタンにクリックを拾わせるには「@click」または「v-on:click」を使います。

<button @click="getAddr({zip})">住所情報取得</button>

または

<button v-on:click="getAddr({zip})">住所情報取得</button>

みたいな感じですね。

getAddrが住所情報を取得するメソッドです。

入力した郵便番号を「zip」に収めて、それを引数にするわけですが、ここでは「{zip}」のように{}で囲っておかないと、値が引き継がれないので注意が必要です。

methodsで住所取得メソッドを定義し、パラメータを受け渡す。

イベントをトリガにして呼ばれるメソッドは「methods：」ブロックに書きます。

  methods: {
    async getAddr ({ zip }) {
      const url = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&limit=1`
      await axios.get(url)
        .then((res) => {
          this.datas = res.data
        })
      return this.data
    }
  },

メソッドのパラメータも{} で囲って取得してます。

axiosを使ってWEB-APIにリクエストしてレスポンスを得る方法自体はasyncData()の中に書いていた前回と同じです。

ちがうのは、asyncData()の場合は「return」で返していたところを、「画面の住所情報表示を部分更新する」ために、変数「this.datas」に直接代入しているところです。

こうするだけで、画面が部分更新されます。