JSFiddle - React, Tailwind, and code Playground

by AldoRomo88

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">

<div>
{{selectedItem}}
</div>

<table-list @item-changed="newValue => selectedItem = newValue " ></table-list>

</div>

JavaScript

Vue.component('table-list', 
{
  template: `<div >
    <p v-for="table in tableList">
        <i class="fa fa-table" aria-hidden="true"></i>&nbsp;
        <span class="text-primary" v-on:click="selectTable(table)"> {{ table }} </span>
    </p>
</div>`,
  data: function(){
  	return{
    	tableList: []  
  	}

  },
  methods: {
    getTableList:function() {
    
      this.tableList.push('One');
      this.tableList.push('Two');
      this.tableList.push('Three');
    },
    selectTable: function(table) {
    	
      this.$emit('item-changed',table);
    }
  },
  mounted() {
    this.getTableList();
  }
});

new Vue({
  el: '#app',
  data:function(){
  return {
  	selectedItem: null
  }
  
  }
})