Vue.js 2 + WP REST API“TypeError：无法读取 null 的属性‘过滤器’”

Question

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

    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: 无法读取 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
    }
  }
}