Vue 2.0 Hello World

by lid0

HTML

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

<div id="app">
Last Emitted: <b>{{lastEmitted}} </b>
  <p v-for="tax in taxonomy">
  
    <tax-view
      v-on:[geteventname(tax.name)]="onTaxViewEvent(tax.evt, $event)"
     :name="tax.name" :evt="tax.evt"></tax-view>
     
      
    
  </p>
  <hr>
   <p v-for="tax in taxonomy">
     <tax-view
      v-on:[tax.evt]="onTaxViewEvent(tax.evt, $event)"
     :name="tax.name" :evt="tax.evt"></tax-view>
   </p>
</div>

JavaScript

/**
author: lidlanca

target: Vue 2 

dynamic event name handling.

*/

// render 2 buttons, when clicked, will emit an event, with selected value.
// the event name to be emitted is provided to the component via the evt prop.
var taxView = Vue.component('taxView',{
  props:["name","evt"],
	template:`
  <div>
  <b>tax: {{name}} </b>
  <button @click="$emit(evt,1)">1</button>
  <button @click="$emit(evt,2)">2</button>
  </div>
  `
})

var app = new Vue({
  el: '#app',
  data: {
    taxonomy: [
    	{name:"AAA", evt:"AAA-terms-selected"}, // when we setup the listener we can use it 
                                              // or use the helper geteventname("AAA")
    	{name:"BBB", evt:"BBB-terms-selected" }
    
    ],
    lastEmitted: ""
  },
  methods: {
    // helper to generate the unique event name by the name.
    geteventname(n){
      return n +"-terms-selected"
    },
    // handle all tax view event, and update lastEmitted. to see selected value in view.
    onTaxViewEvent(evt,value){
       console.log("onTaxViewEvent() arguments", arguments)
       this.lastEmitted =  evt + " " + value
    }
  },
  components:{
   taxView
  }
})