miracle-fox vue component

news-item.js

Vue.component('news-item', {
  template: `
  <div class="panel panel-default">
    <div class="panel-heading">
      {{article.title}}
    </div>
    <div class="panel-body">
      <img :src="article.urlToImage" class="img-responsive img-thumbnail">
      <p>{{article.description}}</p>
      <input type="text" v-model="article.title" />
    </div>
    <div class="panel-footer">
      <button class="btn btn-info" @click="readMore">Read more</button>
    </div>
  </div>
  `,
  props: ['article'],
  data: function () {
    return {
      name: 'Fullstack Developer at Travelola',
      description: 'Savant Node.JS developer with experience with Vue.js'
    }
  },
  methods: {
    readMore: function () {
      this.$emit('unread-minus-one', {
        title: this.article.title
      })
    }
  }
})