Blogger API + Vue

blogger-api-vue.markdown

Blogger API + Vue

A Pen by Irvan Kadhafi on CodePen.

License.

index.html

<div id="app">
<!--   <div class="wrapper">
    <h1 class="titleblog">{{bloggerData.items[2].title}}</h1>
    <div class="contentblog" v-html="bloggerData.items[2].content">
  </div> -->
  
  <div class="wrapper" v-for="post in posts">
      <h1 class="titleblog">{{post.title}}</h1>
    <div class="contentblog" v-html="post.content">
  <div>
</div>

script.js

new Vue({
  el: '#app',
  data(){
    return{
      posts: {}
    }
  },
  mounted(){
    this.getPosts();
  },
  methods:{
    getPosts(address){
      axios.get(address ? address: "https://www.googleapis.com/blogger/v3/blogs/7069086342349432598/posts?key=AIzaSyBTbqfjroUfKvYFF4G9At0niGe-bDkoVmA") .then(response => {
               this.posts = response.data.items;
                });
    },
            navigate(address) {
                this.getPosts(address)
            }
  }
});

scripts

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

style.css

.wrapper {
    background: #ccc none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 50px;
    padding: 20px;
}
.titleblog {
    background: #f7f7f7 none repeat scroll 0 0;
    color: #ccc;
    margin: 0 0 20px;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}