vue js 1.x 대신 Vue js 2.x 지시문을 사용하여 투고를 제목별로 필터링하는 방법

vue js 1.x 대신 Vue js 2.x 지시문을 사용하여 투고를 제목별로 필터링하는 방법

wprest api와 함께 vue js를 사용하는 방법을 같은 주제에 대한 watch-learn 튜토리얼에 따라 배우고 있습니다.문제는 튜토리얼에서 사용된 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

다음 단계를 찾는 데 도움을 주시면 감사하겠습니다.고마워요.

지시문이 필요 없습니다. 계산 속성의 힘을 사용하여 이 작업을 수행합니다.

따라서 입력값으로 게시물을 필터링하고 새로운 게시물 배열을 반환하는 계산된 속성을 반복해야 합니다.

작은 예:

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>

언급URL : https://stackoverflow.com/questions/49321286/how-to-filter-post-by-title-using-vue-js-2-x-directives-instead-of-vue-js-1-x