Nuxt.jsでv-modelが動かなかったので動くようにするまで。

2019年8月4日

前回の続きから

v-modelを動かす

先に結果

うまくいった。
Nuxt.jsに関連する問題というよりも、単一コンポーネントに関連する問題だった。
v-modelがうまく動作しなかった原因は
①messageをdataオブジェクトに定義していなかった
②単一コンポーネントなのにdataをreturnで書いていなかった

詳細

以下の赤いところにTextBoxで入力した内容が瞬時に同期されるようにする

v-modelがうまく動かないので、「nuxt.js v-model動かない」とかいう検索ワードで調べた。最初にここにヒットした。
要はv-modelを使うにあたって、dataオブジェクトにmessageを定義しないといけないということだね。
dataにmessageを書いて動かしてみる。

<template>
  <div>
    <h1>遷移テストやで</h1>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
  export default {
　　//nameに,入れて、その下にdataを定義
    name: "",
    data: function () {
      message:''
    }
  }
</script>

<style scoped>

</style>

はい。エラーが出ました。
エラーの内容的には、messageが定義されてないとかなんとか。
たぶん記述の仕方がミスってる。
っで、ふと思い出す。
コンポーネントのdataって確かreturn書いてたような。。
というわけで、書き直してみる。

<template>
  <div>
    <h1>遷移テストやで</h1>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: "",
    data: function () {
      return{
      message:''
      }
    }
  }
</script>

<style scoped>

</style>

すると、うまくいった。
ちょっと記憶が定かではなかったので、一応調べてみると、公式にちゃんと書いていた。

コンポーネントの data オプションは関数でなければなりません。

Nuxt.jsのpageに作るvueファイルは、すべてコンポーネントとなっている。
.vue拡張子で<template>タグで記述しており、これは単一ファイルコンポーネントなのだ。

少し余談だけど、仕事では、単一ファイルコンポーネントで構成するために、webpackとか色んな設定をしないといけなかったようだ。
私がアサインされた時にはすでに設定済みだった。
それら設定がどういう経緯で決まったのか、まるでなぞだったし、何よりどういう設定なのかというのもよくわからなかった。
Nuxt.jsではデフォルトでそれら設定をしてくれているので動いているわけなので、後々設定がどうなっているのか理解していきたいところ。