Vue.js 錯誤：TypeError：無法讀取未定義的屬性

Question

我對 vue.js 的了解是有限的，但據我所知，這應該可以工作，由於某種原因，當我嘗試訪問數據屬性中的變量時它找不到它。

data: function() {
    return {
        id: 0,
        clients: []
    }
},
methods: {
    getClientData(){
        fetch('/view-clients/' + this.id).then(function (response) {
            return response.text();
        }).then(function (data) {
            this.clients = JSON.parse(data);
            this.id = this.clients[clients.length - 1].id;
        }).catch(function (error) {
            console.log('Error: ' + error);
        });
    }
}

Answer 1

Function scope 很可能是罪魁禍首。 請改用箭頭函數，因此this指的是 Vue 組件。

data() {
    return {
        id: 0,
        clients: []
    }
},
methods: {
    getClientData(){
        fetch('/view-clients/' + this.id).then((response) => response.text())
          .then((data) => {
            this.clients = JSON.parse(data);
            this.id = this.clients[this.clients.length - 1].id;
          }).catch((error) => {
            console.log('Error: ' + error);
          });
    }
}