Skip to main content
本文に 21 文字追加
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

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

HTML

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

JavaScript

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

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

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

Vueのマスタッシュ部分が更新されない

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