使用Axios按插件过滤时，WordPress REST API不起作用

Question

我能够使用axios和Vue.js显示WordPress帖子内容。一旦我切换到按slug过滤，我就无法显示post内容。

<template>
  <div>
    <article>
    <h2 class="subtitle">{{ post.title.rendered }}</h2>
    <div v-html="post.excerpt.rendered"></div>
  </article>
  </div>
</template>

<script>
import axios from "axios";
import Router from 'vue-router'

export default {
  name: 'ShowPost',
  data () {
    return {
      post: []
    }
  },
  created() {
           this.slug = this.$route.params.slug;
       },
  mounted() {
           axios({ method: "GET", "url": "https://wpdemo.stevensoehl.com/wp-json/wp/v2/posts?slug=" + this.slug }).then(json => {
               this.post = json.data;
           }, error => {
               console.error(error);
           });
       }
}
</script>

Answer 1

需要在控制台检查是否存在跨域问题，可能没有跨域问题

Answer 2

我想出了一个解决方案。在我个人帖子的链接中，我携带了slug和id作为params。

<router-link :to="{name: 'ShowPost', params: {slug: post.slug, id:post.id}}">{{ post.title.rendered }}</router-link>

路由是slug，并根据id过滤响应。它现在可以按计划工作了。

import axios from "axios";

export default {
  name: 'ShowPost',
  data () {
    return {
      post: []
    }
  },
  created() {
           this.id = this.$route.params.id;
       },
  mounted() {
           axios({ method: "GET", "url": "https://wpdemo.stevensoehl.com/wp-json/wp/v2/posts/" + this.id }).then(json => {
               this.post = json.data;
           }, error => {
               console.error(error);
           });
       }
}