vue xhr

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/vue@2.1.4/dist/vue.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="blog">
    <ul>
    <li v-for="post in posts.item" class="hvr-sweep-to-top">
      <a :href="post.link" target="_blank" class="commit">
        <div v-html="post.title.rendered"></div>
      </a>
      <div class="extra">
        title: {{ post.title }} <br>link: {{ post.link }} 
      </div>
    </li>
    </ul>  
    </div>  
    <script src="script.js"></script>
  </body>
</html>


var blogURL = 'http://yumeblog.dip.jp/rss2json.php'

var blog = new Vue({
  el: '#blog',
  data: {  
    posts: null
  },
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function() {
      var xhr = new XMLHttpRequest();
      var self = this;
      xhr.open('GET', blogURL);
      xhr.onload = function() {
        self.posts = JSON.parse(xhr.responseText);
        console.log(self.posts);
        alert(self.posts.item[0].title);
      }
      //xhr.withCredentials = true;
      xhr.send()
    }
  }
})


#blog, h2 {
  font-family: 'Helvetica', Arial, sans-serif;
}
a {
  text-decoration: none;
  color: #f66;
}
li {
  line-height: 1.5em;
  margin-bottom: 10px;
  border-bottom: 1px solid #efefef;
      list-style-type: none;
  padding: 12px;
}
li:hover {
  background-color: #efefef;
}