Get data using asyncData

Question

I cant fetch data from API using asyncData

   <template>
      <v-list>
        <v-list-tile>
            <h1>Test {{category}}</h1>
        </v-list-tile>
      </v-list>
   </template>
   export default {
        data () {
            return {
                category: null
            }
        },
        asyncData() {
            return axios.get('/category')
                .then((res) => {
                    return {category: res.data}
                })
        }
    }

I am using an example from official docs https://nuxtjs.org/api/ but with no success. Endpoint 100% percent correct.

Try this answer's approach stackoverflow.com/a/53577797/10967889 — weegee
– weegee, Commented Apr 21, 2019 at 18:28

Andrew1325 · Accepted Answer · 2019-04-21 23:11:50Z

0

I'd remove your 'category' from your regular data. What I think is happening is your asyncData function works fine on the server side but when the component is mounted the regular data then sets 'category' to null. Try this:

export default {
  data () {
    return {

    }
  },
  asyncData() {
    return axios.get('/category')
    .then((res) => {
      return {category: res.data}
    })
  }
}

answered Apr 21, 2019 at 23:11

Andrew1325

3,5691 gold badge18 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Get data using asyncData

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related