Question

我正在一个静态的vue网站上，使用wordpress rest api获取数据。

我正在尝试在Vue页面上显示在API上获取的数据：

<template>
    <div>
        <h1>
          {{ title }}
        </h1>
        <template>
          {{ content }}
        </template>
        <p><nuxt-link to="/">Back to home page</nuxt-link></p>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  validate({ params }) {
    return isNaN(+params.slug)
  },
  asyncData({ params, error }) {
    let slug = params.slug;
    // We can return a Promise instead of calling the callback
    return axios.get('https://dev.lesdeuxvagues.com/api/wp-json/wp/v2/posts/?slug='+slug)
      .then((res) => {
        return { data: res.data }
      })
  },
}

</script>

我也尝试过这种方式：

<template>
    <div>
        <h1>
          {{ title }}
        </h1>
        <template>
          {{ content }}
        </template>
        <p><nuxt-link to="/">Back to home page</nuxt-link></p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  validate({ params }) {
    return isNaN(+params.slug)
  },
  async asyncData({ params, error }) {
    try {
      let slug = params.slug;
      const { data } = await axios.get(`https://dev.lesdeuxvagues.com/api/wp-json/wp/v2/posts/?slug=`+slug)
      return data
    } catch (e) {
      error({ message: 'Article not found', statusCode: 404 })
    }
  }
}
</script>

但是这两种解决方案都不起作用...

我认为问题出在异步函数，但是我不明白为什么。

预先感谢您的帮助

Answer 1

这是您可能想尝试的。当然，您可以方便地自定义API。

<template>
    <p>
        {{data}}
    </p>
</template>

<script>
import axios from 'axios'

export default {

    asyncData(context) {
        // We can return a Promise instead of calling the callback
        return axios.get('https://dev.lesdeuxvagues.com/api/wp-json/wp/v2/posts/')
            .then((res) => {
                return {
                    data: res.data[0]
                }
            })
    },
}

</script>

无法使用nuxt异步显示数据

1 个答案: