Я пытаюсь получить несколько сообщений в wordpress, используя грозный pro api и vue js. Сначала данные загружаются правильно, однако я получаю TypeError: this.posts.filter не является функцией, когда я нажимаю на категорию или что-то набираю в поле ввода.
В функции filterPost я всегда получаю значение undefined из console.log ("сообщения", 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"
}
}
console.log("posts", self.posts[0])
в вычисляемой функции filterPosts? - person Andrew1325   schedule 12.04.2019