【メモ】Vue.js: v-modelを書き換える

どうもてぃ。

最近Vueのキャッチアップを始めました。

業務委託先で使ってるのと、直近でRailsに乗せるのをjQueryからVueに変えたいと個人的に思っていてタイミングが良かったので勉強してます。

v-model

まずはv-modelの書き方から。

<template>
  <div>
    <label for="title">v-model</label>
    <input type="text" id="title" v-model="model.title" />
    <p>{{model.title}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        title: ''
      }
    }
  }
}
</script>

はい。特に書くことはないです。

v-modelの仕様が気になる方は公式を確認してみて下さい。

jp.vuejs.org

v-bindとv-onを使って書き換える

<template>
  <div>
    <label for="title">v-model</label>
    <input
      type="text"
      id="title"
      :value="model.title"
      @input="model.title = $event.target.value"
    />
    <p>{{ model.title }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        title: ''
      }
    }
  }
}
</script>

v-model部分が:value="~~~"と@input="~~~"に変わってます。

もうちょっとかえてみる。

<template>
  <div>
    <label for="title">v-model</label>
    <input
      type="text"
      id="title"
      :value="model.title"
      @input="changeTitle($event)"
    />
    <p>{{ model.title }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        title: ''
      }
    }
  },
  methods: {
    changeTitle(e) {
      this.model.title = e.target.value
    }
  }
}
</script>

こうするとよりわかりやすいな。

v-modelの便利さがわかる書き換えでしたとさ。

おわり

Vue初心者のしょうもないメモなので、生暖かい目で見守っていただけると幸いです。