CODEWITHSUNDEEP
vue.js
eye_water
eye_water

Reputation: 107

Display message depend on v-on:click in vue

I want to dispay my ip address depend on click botton in vue.

Here is my code

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> 
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue- 
resource/0.1.13/vue-resource.min.js"></script>

<div id="my_view">
    <button v-on:click="greet">origin</button>
    <p>{{ message }} </p>
</div>
<script>
new Vue({
    el: '#my_view',
    data: {
       message: ''
    },


    methods: {
        greet: function (data) {
            this.$http.get('http://httpbin.org/ip', function (data) {
                // set data on vm
                this.$set('message', data.origin)

            }).error(function (data, status, request) {
                // handle error
            })
        }
    }
})
</script>

But when i click button, nothing display.

In console, print this:

vue.js:597 [Vue warn]: Cannot set reactive property on undefined, null, 
or primitive value: message

How to fix it?

Vue version: 2.5.17

Upvotes: 1

Views: 1007

Answers (1)

masongzhi
masongzhi

Reputation: 164

you can use this follow instead

this.$http.get('http://httpbin.org/ip', (data) => {
  // set data on vm
  this.$set('message', data.origin)      

}).error(function (data, status, request) {
  // handle error
})

Upvotes: 1

Related Questions