Get data using asyncData

Asked by At

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.

1 Answers

0
Andrew1325 On

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}
    })
  }
}