JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app"></div>

CSS

.red {
  color: red;
}

JavaScript

const ListItem = {
  template: `
    <li><button @click="onClick">{{ format(text) }}</button></li>
  `,
  
  inheritAttrs: false,
  emits: ['chosen'],
  props: ['text'],
  
  methods: {
  	format (value) {
    	console.log('rendering: ' + value)
    
      return value
    },
  
    onClick () {
      console.log(this.$attrs)
      this.$emit('chosen')
    }
  }
}

new Vue({
  template: `
    <div :class="{ red: mode }">
      <button @click="mode = !mode">Click me</button>
	    <ul>
  	    <list-item
    	    v-for="item in items"
      	  :text="item"
        	@chosen="onChosen(item)"
				/>
    	</ul>
		</div>
  `,
  
  components: {
    ListItem
  },
  
  data () {
    return {
      mode: false,
      items: ['Red', 'Green', 'Blue', 'Yellow']
    }
  },
  
  beforeUpdate () {
    console.log('updating...')
  },
  
  methods: {
  	onChosen (item) {
      console.log('chosen: ' + item)
    }
  }
}).$mount('#app')