使用 Axios 通过 slug 过滤时 WordPress REST API 不起作用答案

【问题标题】：WordPress REST API not working when filtering by slug using Axios使用 Axios 通过 slug 过滤时 WordPress REST API 不起作用
【发布时间】：2018-05-15 17:50:36
【问题描述】：

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

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

【问题讨论】：

我在你的 api url 中使用了邮递员，并且能够使用 slug 返回 hello-world。是否可能 this.slug 以某种方式被解析，因此不再匹配？尝试制作更多测试帖子，看看是否有任何回复
在调试控制台查看网络面板，url是什么？
Daniel-我检查了网络面板，响应选项卡显示基于 url 的正确响应，但未显示帖子内容。使用帖子ID时显示帖子内容

标签： wordpress vue.js axios

【解决方案1】：

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

【讨论】：

【解决方案2】：

我想出了一个解决方案。在我指向单个帖子的链接中，我将 slug 和 id 作为参数进行了传递

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

Route 是 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);
           });
       }
}

【讨论】：