在Vue.js中调用WordPress某个分类的内容，通常需要通过WordPress的REST API来获取数据。以下是一个简单的步骤指南，帮助你在Vue模板中实现这一功能。
1. 确保WordPress REST API已启用
WordPress默认启用了REST API，你可以通过访问以下URL来检查是否可用：
https://your-wordpress-site.com/wp-json/wp/v2/categories
如果返回了JSON格式的分类数据，说明REST API已启用。
2. 安装Axios
Axios是一个常用的HTTP客户端，用于在Vue.js中发送HTTP请求。你可以通过以下命令安装Axios：
bash
npm install axios
3. 创建Vue组件
在你的Vue组件中，使用Axios来获取WordPress某个分类的内容。
vue
<template>
<div>
<h1>{{ categoryName }}</h1>
<ul>
<li v-for="post in posts" :key="post.id">
<a :href="post.link">{{ post.title.rendered }}</a>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
categoryName: '',
posts: []
};
},
created() {
this.fetchCategoryPosts();
},
methods: {
async fetchCategoryPosts() {
const categorySlug = 'your-category-slug'; // 替换为你的分类slug
// 获取分类ID
const categoryResponse = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/categories?slug=${categorySlug}`);
const categoryId = categoryResponse.data[0].id;
this.categoryName = categoryResponse.data[0].name;
// 获取该分类下的文章
const postsResponse = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/posts?categories=${categoryId}`);
this.posts = postsResponse.data;
}
}
};
</script>
<style scoped>
/* 添加样式 */
</style>
4. 解释代码
fetchCategoryPosts方法：首先通过分类的slug获取分类ID，然后使用该分类ID获取该分类下的文章。categorySlug：替换为你想要获取的分类的slug。categoryName：用于存储分类名称并在模板中显示。posts：用于存储该分类下的文章列表。
5. 运行项目
确保你的Vue项目已经正确配置并运行，然后你应该能够在页面上看到指定分类的文章列表。