0

Vueの監視プロパティを用いて表示を更新しようと思っているのですが、inputでテキストを変更した際、下記の{{ newMessage }}、{{ oldMessage }}部分が更新されません。({{ message }}部分は更新されます。)
初歩的な質問で恐縮ですがどのようにすれば動作するかお分かりになりましたら教えていただきたいです。

HTML

<p>
  {{ message }}   // inputに入れた値で更新される
  {{ newMessage }}  // nullのまま更新されない
  {{ oldMessage }}  // nullのまま更新されない
</p>
<input type="text" v-model="message" />
<pre>
  {{ $data }}       // newMessage、oldMessageの値が更新されない
</pre>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    newMessage: '',
    oldMessage: ''
    },
  watch: {
    message: (newValue, oldValue) => {
    this.newMessage = newValue
    this.oldMessage = oldValue
    console.log(this.newMessage, newValue) // 共に新しい値がコンソールで表示されている
    }
  }
})    

1 件の回答 1

1

watch の中を

message: function (newValue, oldValue) {
   ...
}

としてください。

functionによる関数と異なり、アロー関数のthisは生成時に決まります。そのため、thisは、期待しているVueインスタンスになりません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。