[Vuejs]-VueJS Syntax: Saving a value in a Promise

by

5👍

✅

You must to define your text property in components data.

From Vue.js documentation:

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive. For example:

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

In your case your component should look like this:

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

Leave a comment