

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

HTML

[code]

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

JavaScript

[code]

    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) // 共に新しい値がコンソールで表示されている
        }
      }
    })    
    
[/code]


CC BY-SA 4.0
2021-06-27T04:41:35.880
77811
2021-06-27T07:10:55.273
2021-06-27T04:47:28.327
3060
47056
question
javascript vue.js
Vueのマスタッシュ部分が更新されない


`watch` の中を

[code]

    message: function (newValue, oldValue) {
       ...
    }
    
[/code]

としてください。

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


CC BY-SA 4.0
2021-06-27T07:10:55.273
77812
2021-06-27T07:10:55.273
9464
77811
answer