Vue.js error: TypeError: Cannot read properties of undefined

Question

My knowledge of vue.js is limited but as far as i'm aware this should work, for some reason when I try to access my variable in the data property it can't find it.

enter image description here

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

Also, function scope applies here since you're not using arrow functions, so this isn't what you think it is. — J. Titus
– J. Titus, Commented Jan 9, 2022 at 22:29
Even with the above comments applied, if it is expected to “work” not depends on the parsed result returned. However, insufficient information has been provided as to what this really is. That is, this questions does not represent a complete minimal reproduction. — user2864740
– user2864740, Commented Jan 9, 2022 at 22:30
Use arrow functions, otherwise this in your callbacks do not refer to the Vue component instance. Also, clients is undefined: do you mean this.clients[this.clients.length - 1].id instead? — Terry
– Terry, Commented Jan 9, 2022 at 22:34

J. Titus · Accepted Answer · 2022-01-09 22:34:36Z

9

Function scope is most likely the culprit. Use arrow functions instead so this refers to the Vue component.

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

answered Jan 9, 2022 at 22:34

J. Titus

9,7201 gold badge37 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Vue.js error: TypeError: Cannot read properties of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related