Syntaxe de VueJS: Enregistrement d'une valeur dans une promesse

Question

Avec some help from StackOverflow J'ai les éléments suivants pour exécuter mon loadData lors du chargement de la page et lorsque le bouton est cliqué.

Toutefois, le texte de la page n'est pas mis à jour. Quelque chose ne va pas au sujet de ma syntaxe avec 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

Vous devez définir votre propriété de texte dans les données des composants.

De la documentation Vue.js:

En raison des limites de JavaScript moderne (et l'abandon de Object.observe), Vue ne peut pas détecter plus de la propriété ou la suppression. Puisque Vue exécute le processus de conversion getter/setter lors de l'initialisation de l'instance, une propriété doit être présente dans l'objet de données pour que Vue puisse le convertir et le rendre réactif. Par exemple:

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

Dans votre cas, votre appareil devrait ressembler à ceci:

<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>