使用asyncData获取数据

时间:2019-04-21 18:26:12

标签: javascript vue.js nuxt

我无法使用asyncData从API提取数据

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

我使用的是官方文档https://nuxtjs.org/api/中的示例,但没有成功。端点正确率100%。

1 个答案:

答案 0 :(得分:0)

我将从常规数据中删除您的“类别”。我认为正在发生的是您的asyncData函数在服务器端可以正常工作,但是在装入组件时,常规数据会将'category'设置为null。试试这个:

export default {
  data () {
    return {

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