JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

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

  <button type="button" @click="isA = !isA">
    Toggle
  </button>

  <template v-if="isA">
    <div class="someclass">
      <button type="button">
        <icon name="upload"></icon> <span>Upload 1</span>
      </button>
    </div>
  </template>
  <template v-else>
    <div class="someclass">
      <button type="button">
        <icon name="upload"></icon> <span>Upload 2</span>
      </button>
    </div>
  </template>
</div>

Babel + JSX

var icon = {
  template: '<span class="svg-icon" :class="className">{{name}}</span>',
  props: {
    name: String
  },
  computed: {
    className() {
      return 'icon-' + this.name;
    }
  },
  mounted() {
    console.log('this.name', this.name, this.$el);
  }
};

new Vue({
  el: '#app',
  data () {
  	return {
    	isA: true
    }
  },
  components: {
    icon
  }
});