Vue - 无法在promise中设置undefined的属性

时间:2017-04-25 14:12:13

标签: javascript vue.js

所以我有以下Vue文件:

<template>

  <li class="notifications new">
      <a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
          <span class="counter">0</span>
          </sup>
       </a>
       <div class="dropdown-menu notifications-dropdown-menu animated flipInX">
            <ul v-for="notification in notifications" @click="" class="notifications-container">
              <li>
                <div class="img-col">
                  <div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
                </div>
              </li>
            </ul>
        </div>
  </li>

</template>

<script>
export default {

    data: function() {
        return {
          notifications: [],
          message: "",
        }
    },

    methods: {

        loadData: function() {
            Vue.http.get('/notifications').then(function(response) {

                console.log(response.data);
                //this.notifications = response.data;
                //this.notifications.push(response.data);

                this.message = "This is a message";

                console.log(this.message);
            });

        },
    },

    mounted() {
        this.loadData();
    },

}

</script>

这样编译得很好,但是,在加载网页时,我收到以下错误:

  
    

app.js:1769未捕获(在承诺中)TypeError:无法设置属性&#39; message&#39;未定义的

  

我也试图创造另一种方法,但没有快乐。我似乎无法弄清楚为什么this无法在这里访问。

5 个答案:

答案 0 :(得分:30)

您的上下文正在发生变化:因为您使用的是关键字 function this在其范围内是匿名函数,而不是vue实例。

请改用箭头功能。

  loadData: function() {
        Vue.http.get('/notifications').then((response) => {

            console.log(response.data);
            //this.notifications = response.data;
            //this.notifications.push(response.data);

            this.message = "This is a message";

            console.log(this.message);
        });

    },

NB:顺便说一句,您应该继续使用关键字 function 作为方法的顶级(如示例所示),否则Vue可以' t将vue实例绑定到this

答案 1 :(得分:0)

还有另一个常见原因,我一直在努力解释为什么您会收到此错误消息。如果您使用v-if而不是v-show来隐藏项目,则该项目将不在DOM中,不会先加载,也无法引用。我花了一段时间才弄清楚为什么会出现上面的错误消息:

vm.$refs.refpersonview.Person = ...

原因是我有条件地将组件隐藏在v-if块中。改用v-show!

答案 2 :(得分:0)

point_radius

}

答案 3 :(得分:0)

在promise中使用箭头功能,然后您可以访问“此”对象。

loadData: function() {
        Vue.http.get('/notifications').then(response => {
            console.log(response.data);
            //this.message = 'Something'
        });

    }

答案 4 :(得分:0)

可以在代码块外部将this设置为const,并使用该const值访问类属性。

const self = this;

blockMethod(function(data) {
    self.prop = data.val();
})