Vue Js - 'this' is not available in methods http call

Asked Jul 25 '22 at 03:45

Active Jul 25 '22 at 03:45

Viewed 17 times

In my vue js application I have this getImportList method:

methods: {
    setIdFeed(id_feed) {
        this.id_feed = id_feed;
    },
    getImportList() {
        http.get("projects/import/" + this.project_token + '/' + this.user_id)
        .then((response) => {
            if( Object.keys(response.data).length !== 0 ) {
                response.data.forEach(function (entry) {
                    this.rows.push({
                        id_feed : entry.id_feed,
                        feed_name: entry.feed_name + " (" + entry.feed_type + ")",
                        tpi: '',
                        status: entry.status,
                    });
                });
            }
        })
        .catch((error) => {
            console.log(error);
        });
    }
},

As you can see I have used this in this method BUT it's not working in the .then method, I can't get the data using this.

Why this this is not available here?

asked Jul 25 '22 at 03:45

Shibbir

1,963
2
25
48

what error is shown in the console tab? where do you call `getImportList`? – nart Jul 25 '22 at 03:55
@nosnart why `this.rows` is not accessable? – Shibbir Jul 25 '22 at 04:06
2

Because you're using a regular function for the callback. `response.data.forEach(function (entry) {` should be `response.data.forEach((entry) => {` to capture the component instance as the context. – tony19 Jul 25 '22 at 04:10
So mean I need to use array function? – Shibbir Jul 25 '22 at 04:46

Vue Js - 'this' is not available in methods http call

0 Answers0