vue js返回值给出未定义的错误

Question

我想检查 $http.get() 的返回值，但我得到了未定义的值。这是我的 vue js 代码：

var vm = new Vue({
    el: '#permissionMgt',
    data: {
        permissionID: []

    },

methods:{
fetchPermissionDetail: function (id) {
            this.$http.get('../api/getComplaintPermission/' + id, function (data) {

                    this.permissionID = data.permissionID; //permissionID is a data field of the database
                    alert(this.permissionID); //*****this alert is giving me undefined value

            });
        },

}
    });

你能告诉我这就是问题所在吗？顺便说一句，$http.get() 正在正确获取所有数据。

Answer 1

这是一个常见的 js 错误。进行以下更改，它将起作用。

fetchPermissionDetail: function (id) {

        var self = this; //add this line
        this.$http.get('../api/getComplaintPermission/' + id, function (data) {

                self.permissionID = data.permissionID; //replace "this" with "self"


            });
        },

}

原因是this在匿名函数function()

中指向了window

这是一个众所周知的js问题。如果您使用的是 es2015，则可以使用箭头语法 (() => { /*code*/ }) 正确设置 this 的语法

Answer 2

您需要检查从服务器返回的 data 是什么类型。如果@Raj 的解决方案没有解决您的问题，那么返回的 data 中可能没有 permissionID。

执行 colsole.log(data) 并检查 data 是否是 object 或 array 的 objects。

干杯！

vue js返回值给出未定义的错误

vue js returned value gives undefined error

vue.js