Question

我正在学习如何在同一主题上使用watch-learn tutorials来使用vp 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

的力量来实现这一目标

因此，您必须通过输入值过滤帖子的计算属性，并返回一个新的帖子数组。

小例子：

＆＃13;

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'
        }
      ]
    }
  }
})

＆＃13;

<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>

＆＃13;

如何使用Vue js 2.x指令而不是vue js 1.x

1 个答案: