<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 keywords = new Vue({
  el: "#keywords",
  count: "",
  data: {
    search: "",
    posts: []
  },
  mounted: function() {
    console.log('axios');
    axios
      .get("https://ja.wordpress.org/wp-json/wp/v2/posts?per_page=100")
      .then(function(res) {
        keywords.posts = res.data;
      });
  },
  computed: {
    filteredposts: function() {
      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