VueJS構文：プロミスに値を保存する

Question

some help from StackOverflowloadDataを実行するには、ページが読み込まれ、ボタンがクリックされたときに実行する必要があります。

ただし、ページのテキストは更新されません。構文に何か誤りがありますthis.text = xhr.data

index.html: 

<div id="app"></div> 

app.js: 

const Vue = window.Vue = require("vue"); 
Vue.prototype.$http = require("axios"); 
const App = require("./components/App.vue"); 

window.app = new Vue({ 
    el: "#app", 
    render: h => h(App) 
}); 

components/app.vue: 

<template> 
    <div> 
     <h1>Test</h1> 
     <p>{{text}}</p> 
     <button @click="this.loadData">Reload</button> 
    </div> 
</template> 
<script> 
export default { 
    mounted() { 
     this.loadData(); 
    }, 
    methods: { 
     loadData() { 
      this.$http.get("https://icanhazip.com") 
       // This fails 
       .then(xhr => this.text = xhr.data); 
     } 
    } 
}; 
</script> 

Answer 1

コンポーネントのデータにテキストプロパティを定義する必要があります。 Vue.jsのドキュメントから

：により、現代のJavaScriptの制限（とObject.observeの放棄）へ

、Vueのは、プロパティの追加や削除を検出することはできません。 Vueはインスタンスの初期化中にゲッター/セッター変換プロセスを実行するため、Vueがデータを変換して反応させるために、データオブジェクトにプロパティが存在していなければなりません。例えば：あなたのケースでは

var vm = new Vue({ 
    data: { 
    a: 1 
    } 
}) 
// `vm.a` is now reactive 
vm.b = 2 
// `vm.b` is NOT reactive 

は、コンポーネントは次のようになります。

<script> 
export default { 
    created() { 
     this.loadData(); 
    }, 
    data() { 
     return { 
      text: '', 
     }; 
    }, 
    methods: { 
     loadData() { 
      this.$http.get("https://icanhazip.com") 
       // This fails 
       .then(xhr => this.text = xhr.data); 
     } 
    } 
}; 
</script>