<div id="keywords">
  <div class="search_box">
    <input type="text" v-model="search">
  </div>
  <ul>
    <li class="hoge" v-for="post in filteredposts">
      <a :href="post.link">{{post.title.rendered ? post.title.rendered : '無題'}}</a>
    </li>
  </ul>
</div>
/* global axios, Vue, jQuery */
let count = 0;
let keywords = new Vue({
  el: "#keywords",
  count: "",
  data: {
    search: "",
    posts: []
  },
  computed: {
    filteredposts: function() {
      console.log('axios'+count++);
      axios
        .get("https://ja.wordpress.org/wp-json/wp/v2/posts?per_page=100&search="+this.search)
        .then(function(res) {
          keywords.posts = res.data;
        });
      console.log('filter');
      let posts = [];
      for (let i in this.posts) {
        let post = this.posts[i];
        if (
          post.title.rendered.indexOf(this.search) !== -1 ||
          post.content.rendered.indexOf(this.search) !== -1
        ) {
          posts.push(post);
        }
      }
      return posts;
    }
  }
});
keywords.count = 0;s

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js