Vue.js 2 + WP REST API "TypeError: Cannot read property 'filter' of null"

Question

我开始学习如何使用 Vue.js 2 和 Axion 来使用 WP REST API。我设法启动了一个请求，并在 v-for 指令中显示了我所有的 post。尝试从我从 json 请求获得的 post 列表中制作一个简单的过滤器我无法访问数据：

    var App = Vue.extend({});

   var postList = Vue.extend({
    template:'#post-list-template',
    data (){
        return {
            posts: null
        }
    },

    mounted (){
        axios
        .get('/wp-lab/wp-json/wp/v2/posts?per_page=20')
        .then(response => (this.posts = response.data));
        
    },
    computed: {
      filteredPosts( ) {
        var cat = this.posts;
        console.log(cat);
        return cat.filter( function(post){
            return post.id > 2;
        })
        
                
      }
    }

})

var router = new VueRouter({
  routes: [
    { path: '/', component: postList }
  ]
})

new Vue({
  el: '#mount',
  router: router,
})

我收到错误

TypeError: Cannot read property 'filter' of null

console.log(catalogue) 向我显示了所有检索到的数据，但我无法对其应用过滤器属性。知道我做错了什么吗？

模板是这样的

    <template id="post-list-template">
                <div class="container vue-loop">
                    <article v-for="post in filteredPosts" class="post vue-block">
                        
                        <div class="entry-header"> <h2>{{ post.title.rendered }}</h2> </div>
                        <div class="entry-content"> <img v-bind:src=post.featured_image_src ></img> </div>
                        
                    </article>
                </div>
</template>

提前致谢

Answer 1

计算的属性 filteredPosts 正在评估在 posts 被 axios 调用赋值之前。所以 posts 未定义，对 posts.filter() 的调用失败。

如果您向计算的属性添加条件以确保在尝试过滤之前为其分配了一个值，那么它将起作用。请参阅下面的示例。

computed: {
  filteredPosts () {
    var cat = this.posts;
    console.log(cat);
    if (cat) { // ⭐️ check to make sure cat is assigned a value
      return cat.filter( function(post){
          return post.id > 2;
      })
    } else {
      return [] // ⭐️ just return an empty array if cat isnt ready yet
    }
  }
}

Vue.js 2 + WP REST API "TypeError: Cannot read property 'filter' of null"

Vue.js 2 + WP REST API "TypeError: Cannot read property 'filter' of null"

vue.js

wordpress-rest-api