Display message depend on v-on:click in vue

Question

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

this is not set in a bare function. Use an arrow function. Also, $set should take three arguments. You're leaving out the first. — Roy J
– Roy J, Commented Oct 23, 2018 at 1:45
@RoyJ Well, I don't know how to write code depond on your describe... — eye_water
– eye_water, Commented Oct 23, 2018 at 1:51

masongzhi · Accepted Answer · 2018-10-23 01:54:16Z

1

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

answered Oct 23, 2018 at 1:54

masongzhi

1641 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eye_water Over a year ago

I have a try. But it seems like message variable is wrong. vue.js:597 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: message

masongzhi Over a year ago

you don't need to use $set, this.message=data.origin is the good way, $set use in array or object target

eye_water Over a year ago

It's ok. Thanks.

aBiscuit Over a year ago

To use set correctly, first argument should be a context, so code should look like: this.$set(this, 'message', data.origin). But it is correct, that $set should be used only for specific cases, when reactivy does not work as expected, e.g. dynamically created arrays of objects or multiple level nested objects, that were not declared initially in component's data.

Collectives™ on Stack Overflow

Display message depend on v-on:click in vue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related