Set object in data from a method in VUE.js

Question

I have been stuck with this issues for 2 hours now and I really can't seem to get it work.

const app = new Vue({
  el: '#book-search',
  data: {
    searchInput: 'a',
    books: {},
  },
  methods: {
    foo: function () {
      axios.get('https://www.googleapis.com/books/v1/volumes', {
        params: {
          q: this.searchInput
        }
      })
      .then(function (response) {
        var items = response.data.items
        for (i = 0; i < items.length; i++) {

          var item = items[i].volumeInfo;

          Vue.set(this.books[i], 'title', item.title);   

        }
      })
      .catch(function (error) {
        console.log(error);
      });

    }
  }
});

When I initiate search and the API call I want the values to be passed to data so the final structure looks similar to the one below.

data: {
  searchInput: '',
  books: {
    "0": {
       title: "Book 1"
     },
    "1": {
       title: "Book 2"
     }
},

Currently I get Cannot read property '0' of undefined.

Value of this is different in the callback function of axios .then() method. You have to save the value of this outside before using it in callback scope. — abhishekkannojia
– abhishekkannojia, Commented Jul 2, 2017 at 9:26
@abhishekkannojia If I change this to app, that is how my Vue instance is defined, it throws a Cannot convert undefined or null to object error. — Svedr
– Svedr, Commented Jul 2, 2017 at 9:29
Notice that this is about a "traditional" JavaScript object (dictionary), not an actual Set object as created with new Set() - I came here looking how Vue handles these... — Chris K
– Chris K, Commented Aug 5, 2019 at 15:22

abhishekkannojia · Accepted Answer · 2017-07-02 10:01:20Z

15

Problem lies here:

Vue.set(this.books[i], 'title', item.title);

You are inside the callback context and the value of this is not the Vue object as you might expect it to be. One way to solve this is to save the value of this beforehand and use it in the callback function.

Also instead of using Vue.set(), try updating the books object directly.

const app = new Vue({
  el: '#book-search',
  data: {
    searchInput: 'a',
    books: {},
  },
  methods: {
    foo: function () {
      var self = this;
      //--^^^^^^^^^^^^ Save this
      axios.get('https://www.googleapis.com/books/v1/volumes', {
        params: {
          q: self.searchInput
          //-^^^^--- use self instead of this
        }
      })
      .then(function (response) {
        var items = response.data.items
        var books = {};
        for (i = 0; i < items.length; i++) {

          var item = items[i].volumeInfo;
          books[i] = { 'title' : item.title };
        }
        self.books = books;
      })
      .catch(function (error) {
        console.log(error);
      });

    }
  }
});

Or if you want to use Vue.set() then use this:

Vue.set(self.books, i, {
     'title': item.title
});

Hope this helps.

edited Jul 2, 2017 at 10:01

answered Jul 2, 2017 at 9:36

abhishekkannojia

2,86625 silver badges32 bronze badges

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

1 Comment

Svedr Over a year ago

Hey, thanks for your help, this makes a lot of sense, but I am still getting the Cannot convert undefined or null to object error.

Mykola Riabchenko · Accepted Answer · 2017-07-02 10:06:52Z

2

yep, the problem is about context. "this" returns not what you expect it to return.

you can use

let self = this;
or you can use bind

function(){this.method}.bind(this);

the second method is better.

Also google something like "how to define context in js", "bind call apply js" - it will help you to understand what is going wrong.

answered Jul 2, 2017 at 10:06

Mykola Riabchenko

6189 silver badges24 bronze badges

Comments

badunius · Accepted Answer · 2020-07-15 12:31:46Z

1

// update component's data with some object's fields
// bad idea, use at your own risk

Object
  .keys(patch)
  .forEach(key => this.$data[key] = patch[key])

answered Jul 15, 2020 at 12:31

badunius

801 silver badge6 bronze badges

Collectives™ on Stack Overflow

Set object in data from a method in VUE.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related