nuxtでvueのv-modelでのフォーム入力バインディングが効かない

Question

nuxtのpages/index.vueで下記の実装をしたのですがうまく値がリアルタイムでバインディングされません。。。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

なぜかコード上でmessageを変更して保存したときだけききます。event設定しなくてもv-modelはきくと思っていたのですがイベントを設定しないとうまく発火しないのかなとも思ったんですが下記のvueのドキュメントだとそういうわけでもなさそうだなと思っています。

https://jp.vuejs.org/v2/guide/forms.html

nuxt上でうまくinputに入力したmessageをリアルタイムにバインディングする方法はないでしょうか？

Comments

[FeLvi_zzz]

2点質問したいことがあります。
・コンポーネントの中のdata内でmessageは初期化していますか？
・日本語など変換が必要な言語は確定するまで反映されませんが、リアルタイムにバインディングする対象というのは英語のことでしょうか？

よろしくお願いします。

[you88]

>・コンポーネントの中のdata内でmessageは初期化していますか？
→すみません、初期化というのはどうやったらできるでしょうか？
・日本語など変換が必要な言語は確定するまで反映されませんが、リアルタイムにバインディングする対象というのは英語のことでしょうか？
→日本語を確定したときに反映されるようにしたいです

Answer 1

ES6のアロー関数はfunction(){ }とthisが指すものが違うので、

data(){
  message: ''
}

の形で宣言してください。

ちなみにオブジェクト内の

data(){
  message: ''
}

はES5で書くと、

data: function() {
  message: ''
}

となります。

コメントで

export default {
 var appform = new Vue({
  el: '#appform',
  data: () => ({
   message: ''
  })
 })
}

と書かれていますが、.vueファイルであれば

export default {
  data() {
   message: ''
}

と書く必要があり、新たにVueインスタンスを作成する必要はありません。

Comments

[you88]

できました！ありがとうございます！また別の質問になってしまうのですがvueの記述をnuxtでする場合、componentのelの宣言は必要なく、全文がその対象になるんでしょうか？（vueだとelで命名したid名の中で記述した動作ができると思うのですが）

[FeLvi_zzz]

お役に立てたようで何よりです。

Nuxtのpageフォルダ以下のvueファイルはそれぞれが一つのコンポーネントなので、ファイル内のtemplate全文が対象になります。

[you88]

なるほど！ありがとうございました！

Answer 2

<template>
  <div>
    <input
      v-model="message"
      placeholder="edit me"
    >
    <p>Message is: {{ message }}</p>
  </div>
</template>

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

index.vueの全体像です。
template内で使う変数は、使用する変数を含んだオブジェクトをdata関数の返り値として設定しておく必要があります。

Comments

[you88]

export default {
var appform = new Vue({
el: '#appform',
data: () => ({
message: ''
})
})
}

ありがとうございます！こういった形で宣言したのですが反映されず。。。