javascript - 如何使用 Vue js 2.x 指令而不是 vue js 1.x 按标题过滤帖子

Question

我正在学习通过关注 watch-learn tutorials 将 vue js 与 wprest api 一起使用在同一个话题上。问题是教程中使用的vue js版本似乎是v 1.x，我开始使用vue js 2.x。我能够弄清楚如何使用 vue js 2.x 显示所有帖子的初始阶段。我有一个输入字段，我使用它搜索应该过滤并显示帖子的特定标题。该问题无法准确确定需要如何使用 vuejs 2.x 进行计算。我已经包含了一个包含 json 数据以及我的工作代码的 codepen 链接。

以下是用于按标题过滤帖子的输入字段

<div class="row">
    <h4>Filter by name:</h4>
    <input type="text" name="" v-model="nameFilter">
</div>
<div class="row">
    <div class="col-md-4" v-for="post in posts">
        <div class="card post">
            <img class="card-img-top" v-bind:src="post.fi_300x180" >
            <div class="card-body">
                <h2 class="card-text">{{ post.title.rendered }}</h2>
                <small class="tags" v-for="category in post.cats">{{ category.name }}</small>
            </div>
        </div> <!-- .post -->
    </div> <!-- .col-md-4 -->
</div> <!-- .row -->

https://codepen.io/dhivyasolomon/pen/LdZKJY

在确定下一步时，我将不胜感激。谢谢。

Answer 1

你不需要指令，使用 Computed properties 的力量来实现。
因此，您将不得不遍历计算属性，该属性通过输入值过滤帖子并返回一个新的帖子数组。
小例子:

new Vue({
  el: '#example',
  computed: {
    filteredPosts () {
      return this.posts.filter(p => p.title.toLowerCase().includes(this.filterText.toLowerCase()))
    }
  },
  data () {
    return {
      filterText: '',
      posts: [
        {
          title: 'My first post title',
          body: 'foo'
        },
        {
          title: 'Another post title',
          body: 'foo'
        },
        {
          title: 'This will work fine',
          body: 'foo'
        },
        {
          title: 'Omg it\'s working!',
          body: 'foo'
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>


<div id="example">
  
  <input type="text" v-model="filterText" />
  
  <ul>
    <li v-for="post in filteredPosts">{{ post.title }}</li>
  </ul>

</div>