Vue Component Blog Post Example

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/vue"></script>

<div id="demo">
   <vrau
     v-for="(item, index) in items"
     :key="index"
     @whops="whops"
     :item="item"
   >
   </vrau>
</div>

CSS

.vrau {
  cursor: pointer;
}

JavaScript

new Vue({
  el: '#demo',
  components: {
  	vrau: {
    	props: ['item'],
    	template: `<div
      						 class="vrau"
        					 @click="$emit('whops', item)"
        				 >
                   {{ item.name }}
                 </div>`
    }
  },
  data: {
    items: [
      {
        name: 'A'
      },
      {
        name: 'B'
      },
    ]
  },
  methods: {
  	whops ($event) {
    	$event.name = 'Naahh'
      window.alert($event.name)
    }
  }
})