我正在尝试使用强大的pro api和vue js在wordpress中获取一些帖子。最初，数据正确加载，但是出现TypeError：单击类别或在输入字段中键入内容时，this.posts.filter不是函数。
在filteredPost函数中，我总是无法从console.log（“ posts”，this.posts [0]）中获得不确定的信息。
JS
var postList = Vue.extend({
template: "#post-list-template",
data: function(){
return {
posts:'',
nameFilter:'',
categories: '',
categoryFilter: ''
}
},
mounted: function(){
var apiKey = 'my-api-key';
this.$http.get('/wp-json/frm/v2/forms/10/entries', {
headers: {
Authorization: 'Basic '+ btoa( apiKey +':x' )
}
})
.then((response) => {
this.posts = response.data;
})
//all category data
this.$http.get('/wp-json/wp/v2/categories/')
.then(response => this.categories = response.data);
},
computed: {
filteredPost: function () {
var self = this;
var selectedCategory = self.categoryFilter;
console.log("selectedCategory", selectedCategory)
console.log("posts", this.posts[0])
if( selectedCategory === ""){
return this.posts;
}else{
return this.posts.filter(function(post) {
return post.sqaja-value.indexOf(selectedCategory) >= 0;
});
}
if( this.nameFilter == ''){
return this.posts;
}
var lowerCaseFilter = this.nameFilter.toLowerCase()
return this.posts.filter(function(post){
return post.meta.bl3pl.toLowerCase().indexOf(lowerCaseFilter) >= 0;
});
},
} //computed
})
// Start a new instance of router (instead of router.map)
var router = new VueRouter({
routes: [
{ path: '/', component: postList }
]
})
// Start a new instance of the Application required (instead of router.start)
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})
模板
<main class="wrap">
<div id="app">
<router-view></router-view>
</div>
</main>
<template id="post-list-template">
<div class="wrapper">
<div class="container">
<div class="row">
<h4>Filter by Title: </h4>
<input type="text" name="" v-model="nameFilter">
<h4>Filter by category</h4>
<div class="radio-wrap">
<input type="radio" value="" v-model="categoryFilter">
<label> All </label>
</div>
<div class="radio-wrap" v-for="category in categories" v-if="category.name != 'Uncategorized'">
<input type="radio" v-bind:value="category.id" v-model="categoryFilter">
<label> {{ category.name }} </label>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4" v-for="post in filteredPost">
<div class="card post">
<img class="card-img-top" v-bind:src="post.meta.xbxiv" >
<div class="card-body">
<h2 class="card-text">{{ post.meta.bl3pl }}</h2>
<small class="tags" v-for="category in post.cats">{{ category.name }}</small>
</div>
</div> <!-- .post -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .wrapper -->
</template>
编辑 我不知道这是否相关，但是代码可与标准wp api一起使用
[
{
"id": 15577,
"date": "2018-09-10T23:30:43",
"date_gmt": "2018-09-10T18:00:43",
"guid": {
"rendered": "https://example.com/?p=15577"
},
"modified": "2018-09-11T10:17:59",
"modified_gmt": "2018-09-11T04:47:59",
"slug": "demonetisation-and-its-impact-on-tax-collection-and-formalisation-of-the-economy",
"status": "publish",
"type": "post",
"link": "https://example.com/demonetisation-and-its-impact-on-tax-collection-and-formalisation-of-the-economy/",
"title": {
"rendered": "Demonetisation and its impact on Tax collection and Formalisation of the Economy"
},
"content": {},
"excerpt": {},
"author": 6,
"featured_media": 15576,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"template": "",
"format": "standard",
"meta": [],
"categories": [],
"tags": [],
"_links": {}
}
]
但是，强大的api看起来像这样
{
"y8rau": {
"id": "5352",
"item_key": "y8rau",
"name": "",
"ip": "::1",
"meta": {},
"form_id": "10",
"post_id": "4862",
"user_id": "1",
"parent_item_id": "0",
"is_draft": "0",
"updated_by": "1",
"created_at": "2016-11-25 02:46:33",
"updated_at": "2018-02-21 10:08:58"
},
"o0nqn": {
"id": "5353",
"item_key": "o0nqn",
"name": "",
"ip": "::1",
"meta": {},
"form_id": "10",
"post_id": "4863",
"user_id": "1",
"parent_item_id": "0",
"is_draft": "0",
"updated_by": "1",
"created_at": "2016-11-25 02:46:34",
"updated_at": "2018-02-21 09:41:57"
}
}
答案 0 :(得分：2)
这是因为您在初始化期间已将posts声明为空字符串。字符串原型没有filter方法，因此会出错。
如果首先将其声明为空数组，则错误应消失：
data: function(){
return {
posts: [],
nameFilter: '',
categories: [],
categoryFilter: ''
}
},
p / s：我想categories也应该是一个数组。
答案 1 :(得分：0)
好，因此您收到了对HTTP请求的响应，但未将响应分配给“帖子”。这可能是由于Vue的生命周期挂钩如何工作。如果将mounted()更改为created()，则可能会起作用，但也可以使“帖子”成为计算属性而不是数据元素。
要执行此操作，请从“数据”中删除帖子（和类别），以便您一劳永逸。
data: function(){
return {
nameFilter:'',
categoryFilter: ''
}
},
然后将帖子（和类别）设为计算函数：
computed: {
posts() {
//put your $http.get request in here, but instead of assigning the response, return it
.then((response) => {
return response.data;
})
},
categories() {
//separate $http.get for categories and return response
}
// Then your other computed properties like filteredPosts
...
}
您可以使用this.posts