How to use axios response data in data function - vue

Question

Using axios to fetch api data:

fetchData () {
  axios.get(globalConfig.OFFERS_URL)
    .then((resp) => {
      this.offersData = resp.data
      console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

Data function:

  data () {
    return {
      offersData: {}
    }
  }

Now i can use fetched data in my template, like so: {{ offersData.item[0].id }}

But can i set the fetched data in a data function:

  data () {
    return {
      offersData: {},
      id: this.offersData.item[0].id
    }
  }

It's not working for me, is that even possible to store axios get's response in a data function?

raina77ow · Accepted Answer · 2018-08-29 19:28:02Z

3

You probably are looking for computed property:

data () {
  return {
    offersData: {},
  }
},
computed() {
  id() {
    return this.offersData.item && this.offersData.item[0].id;
  }
}

As for data function, it is used to define shape of state (set up the properties to be tracked) of component and give valid initial values to it. In this case, however, id should neither be a part of state (it's always a part of offersData value, after all) nor its initial value can be calculated before offersData is set up by a remote call.

edited Aug 29, 2018 at 19:28

answered Aug 29, 2018 at 19:23

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

6 Comments

thanksd Over a year ago

That return statement will cause an error because this.offersData.item is undefined when the component initializes. And this.offersData will always be truthy in that context. I'd do if (this.offersData.item && this.offersData.item[0]) { return this.offersData.item[0].id }

raina77ow Over a year ago

Ah, missed that part out, thank you. I made a shortcut here, as this.offersData.item is undefined initially, and can be only set up by a call returning an array - so if it fails, it fails for a reason.

Alexander Kim Over a year ago

Thanks, as i understand data () is for static values and v-model, right? Also why do you set this.offersData.item && before id? Still can't get it.

raina77ow Over a year ago

Because initial value of this.offersData is an empty object - and when id() is called the first time, attempt to check the whole path results in error (attempt to access property 0 of undefined). This way, the check is avoided with so-called short-circuit evaluation - id is undefined until filled, no error thrown.

raina77ow Over a year ago

Yes, you can, but as properties, not as methods (i.e., you should write this.id, not this.id())

|

Collectives™ on Stack Overflow

How to use axios response data in data function - vue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related