WordPress Vue axios

index.html

<div id="keywords">
  <h2> Disclaimer : Demo data from CeleGabar.com </h2>
  <ul>
    <li class="hoge" v-for="post in filteredposts">
      <a :href="post.link">{{post.title.rendered ? post.title.rendered : 'Hover'}}</a> <br/> {{post.date}} <hr/>
    </li>
  </ul>
</div>

script.js

/* global axios, Vue, jQuery */
let keywords = new Vue({
  el: "#keywords",
  count: "",
  data: {
    search: "",
    posts: []
  },
  mounted: function() {
    console.log('axios');
    axios
      .get("https://celegabar.com/wp-json/wp/v2/posts?per_page=60")
      .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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

wordpress-vue-axios.markdown

WordPress Vue axios

Get 60Post titles and navigate to full post

A Pen by Tsan Aung on CodePen.

License.