JSFiddle - React, Tailwind, and code Playground

by james gotsell

HTML

<div id="app">
        <h3>Blog Post App</h3>
       
        <ul>
            <li v-for="post in posts">
                <!-- i need to create a link to the post -->
                {{post.id}}
                <h4>Blog title</h4>
                <h5><span class="title">{{ post.title }}</span></h5>
                <span class='blog_body'> {{ post.body }}</span>
                <br/>
                <button class="show">Show me the blog</button>
                <button class="hide">hide the blog</button>
            </li>
        </ul>
   


</div>

JavaScript

// vue
window.onload = function () {
  
var url = 'http://jsonplaceholder.typicode.com'

new Vue({
  el: '#app',
  data: {
    posts: ['posts']
  },
  
  ready: function() {
    this.apiData();
       
       $('.hide').click(function(){
           $(".blog_body").hide();
       });

       $('.show').click(function(){
           $(".blog_body").show();
       });
  },
  methods: {

    apiData: function () {
        var self = this;
        $.get( url + "/posts", function( data ) {
            self.posts = data;
        });
     }
    }
  });
}