How to extract axios response data into variables in vuejs

Question

I am trying to achieve the same functionality as the ...mapState() function in Vue.

I have an axios request that returns an object with different props, like this:

axios.get(
 '/'
).then(
 res => {
  console.log(res) // {name: 'foo', age: 22, height: '1.72m', job: 'developer'}
 }
)

Now, in the same way as ...mapState() can I extract the props so I can use them in my template like:

<template>
 <div> 
  Hello My name is {{name}} and I am {{age}} years old
 </div>
</template>

I was thinking about assigning the response object to the vuejs data, but I have other variables that I don't want to be re-written

Yakalent · Accepted Answer · 2018-03-15 09:18:19Z

1

you can try this:

axios.get(
 '/'
).then(
 res => {
  console.log(res) // {name: 'foo', age: 22, height: '1.72m', job: 'developer'}
  return { index: res}
 }
)

then you can access the data

<template>
 <div> 
  Hello My name is {{index.name}} and I am {{index.age}} years old
 </div>
</template>

answered Mar 15, 2018 at 9:18

Yakalent

1,1522 gold badges10 silver badges18 bronze badges

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

4 Comments

This seems better than the other (deleted) answers I got. Are you sure it works though? There is nothing binding {{index}} to the global vars

i don't know what your mean? use {{index.name}} to get the value

what is the exact result of the console.log(res)?

the response is okay, just the interpolation isn't working