はじめに

こんにちは、SHIFT の開発部門に所属しているmurasawaです。今期より中途で入社し、バックエンド関連の開発を担当しています。

現在、研修でデータベースやRestAPIについて基本的な事から学んでいます。
学んだことをアウトプットし理解を深めていくとともに技術の共有として役に立てば幸いです。

今回は私自身興味もあり、触ってみたいと思っていたこと、また業務で必要とされていたvue.js、vuetifyでのフロントエンド開発の際に困ったv-modelとv-on,v-bindについてまとめてみました。

今回の説明で出てくるプログラムはVue CLIの<template>, <script>内に書くことを想定しています。

v-modelについて

v-modelは双方向のデータバインディングを行います。
例えば名前を入力する欄をv-modelで作りました。

<template>
  <div id="app">
    <input type="text" v-model="myName">
    {{myName}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
      myName: 'taro'
  })
}
</script>

入力欄とdataプロパティーを下記の記述で表示しています。

<input type="text" v-model="myName">
{{myName}}

最も単純なものなので下記のキャプチャ画面のように表示されます。

入力欄の値を消して変更してみると

dataプロパティ"myName"の値も同時に消されています。
また値をjiroに変更してみると

dataプロパティの値も変更されました。

v-modelを使用することで入力された値とデータプロパティを紐づけ、どちらかが変更されたら他方も変更されるようにすることができます。

v-bindとv-on

v-modelはv-bindとv-onに分割して書くことができます。 v-modelと同じ動きをするコードを以下に記します。

<template>
  <div id="app">
    <input type="text" v-bind:value="myName" v-on:input="changeMyName">
    {{myName}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:() => ({
      myName: 'taro'
  }),
  methods:{
    changeMyName(event) {
       // DBへの登録や正規表現での整形などの処理が書ける
      this.myName = event.target.value;
    }
  }
}
</script>

v-bindで入力欄のvalueとmyNameを紐づけ、v-onでイベントが発生した際に実行するメソッドを指定します。

今回は入力欄に値がinputされた際にchangeMyNameという関数を実行しています。

値が入力されたときにdataプロパティ"myName"に値を格納しています。

v-modelとv-bind,v-on

簡潔に言えばv-bindとv-onを使ったものを省略して書けるのがv-modelといえると思います。

ただし、v-modelはイベントで実行されるメソッドを自分で書くことはできないので、 入力された値を成形したり、データベースに登録する処理などを書きたい場合はv-bind,v-onを使ったやり方でv-onで指定したメソッドに行いたい処理を記述してください。

補足サンプルコード

試しに値を常に大文字にしたサンプルコードを書きます。

<template>
  <div id="app">
    <input type="text" :value="upperCase" @input="changeMyName" />
    {{ upperCase }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:() => ({
      myName: ''
  }),
  computed: {
     upperCase() {
         return this.myName.toUpperCase();
     }
  },
  methods:{
     changeMyName(event) {
         // DBへの登録や正規表現での整形などの処理が書ける
         this.myName = event.target.value;
         
     }
  }
}
</script>

常に大文字にすることができました。
以下補足です。

①v-bindで指定する値を常に大文字にするためにcomputedプロパティを使用しました。
v-modelやv-bindで指定するプロパティはdataだけでなく、computedでも指定することができます。
ただし、computedのgetメソッドを用いて値をreturnで返してください。

ここで渡す値を大文字にしています。
computedは使われているものの値が変化するたび実行されるので(今回はupperCase()内のthis.myNameが変更されるたびupperCase()が実行されている)、入力欄の値を変更するたび大文字に変更され再度v-modelやv-bindに渡されます。

②v-bind:valueの省略形として:value、v-on:inputの省略形として@inputをつかうことができます。

③また、v-modelではobject(複数の値を持つもの)を扱うことができないので自作コンポーネントのpropsにオブジェクトを渡す際もv-bindで渡す必要があります。

propsに関しては別記事で書きたいと思います。

終わりに

今回は文字を入力して処理するには欠かせないv-modelとv-bind,v-onについてまとめてみました。

v-modelは記述する量も少なくて済み、処理を自動で行ってくれますが、 v-bindやv-onを使った方法より拡張性がありません。

特別な処理を書いたりオブジェクトを扱いたい場合、v-bindが適しています。

目的によって使い分けができると理解が進むと思います。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/