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>

CSS

button {
  height: 20px;
}

JavaScript

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

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

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