JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

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

<template id="veg">
  <button type="button" @click="showVeg">Show Vegetable</button>
  <button type="button" @click="showFruit">Show Fruit</button>
</template>

JavaScript

// This is the mixin
const VegetableSearchable = {
  props: {
  	vegetable: { default: 'celeri' },
    fruit:     { default: 'apple' }
  },
  methods: {
    showVeg()   { alert(this.vegetable); },
    showFruit() { alert(this.fruit); }
  }
};

// This is the component that uses the mixin
Vue.component('veg', {
  template: '#veg',
  mixins: [VegetableSearchable],
  props: {
 		// This is where the default value for this component is set
  	vegetable: { default: 'carrot' }
  }
});

new Vue({
  el: '#js-app'
});