显示消息取决于v-on:单击vue

时间:2018-10-23 01:43:29

标签: vue.js

我要根据vue中的点击botton来支付我的IP地址。

这是我的代码

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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>

但是当我单击按钮时,什么也没有显示。

在控制台中,打印以下内容:

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

如何解决?

Vue版本:2.5.17

1 个答案:

答案 0 :(得分:1)

您可以改用此跟踪信息

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

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