TypeError: this.posts.filter не является функцией, использующей Vue js и wordpress api

Я пытаюсь получить несколько сообщений в 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:&nbsp;</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"
    }
}

person shubhra    schedule 11.04.2019    source источник
comment
Можете ли вы console.log response.data, когда пытаетесь назначить this.posts в смонтированном состоянии.   -  person Andrew1325    schedule 12.04.2019
comment
Да, я вижу данные в своей консоли. я добавил правку. не могли бы вы взглянуть и посмотреть, помогает ли это решить эту проблему? Спасибо за уделенное время   -  person shubhra    schedule 12.04.2019
comment
что, если вы попробуете console.log("posts", self.posts[0]) в вычисляемой функции filterPosts?   -  person Andrew1325    schedule 12.04.2019
comment
Это дает мне неопределенность   -  person shubhra    schedule 12.04.2019


Ответы (2)


Это потому, что вы объявили свой posts как пустую строку во время инициализации. У строкового прототипа нет метода filter, отсюда и ошибка.

Если вы сначала объявите его как пустой массив, ошибка должна исчезнуть:

data: function(){
    return {
        posts: [],
        nameFilter: '',
        categories: [],
        categoryFilter: ''
    }
},

p / s: Я полагаю, categories тоже должен быть массивом.

person Terry    schedule 11.04.2019
comment
По-прежнему возникает та же ошибка: [Предупреждение Vue]: Ошибка при рендеринге: TypeError: this.posts.filter не является функцией - person shubhra; 11.04.2019
comment
Привет, я добавил правку. не могли бы вы взглянуть и посмотреть, помогает ли это решить эту проблему? Спасибо за уделенное время - person shubhra; 12.04.2019

Итак, вы получаете ответ на свой 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

person Andrew1325    schedule 12.04.2019