JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue-instance">
  <my-component ref='comp'></my-component>
  <button v-for="item in inventory" @click="initComponent(item)">
    {{ item.name }}
  </button>
</div>

JavaScript

Vue.component('my-component', {
  template: '<div>Name: {{name}}///{{id}}</div>',
  data: function() {
    return {
      id: null
    }
  },
  computed: {
   name: function() {
    return this.id ? this.id.toUpperCase() :  'empty'
   }
  },
  methods: {
    init: function(item) {
      this.id = item.id
    }
  }
})

var vm = new Vue({
  el: '#vue-instance',

  data: {
    inventory: [{
      name: '___________',
      id: null
    }, {
      name: 'MacBook Pro',
      id: 'MacBook Pro'
    }, {
      name: 'Lenovo W530',
      id: 'Lenovo W530'
    }, {
      name: 'Acer Aspire One',
      id: 'Acer Aspire One'
    }]
  },
  methods: {
    initComponent(item) {
      this.$refs.comp.init(item)
    }
  }
});