JSFiddle - React, Tailwind, and code Playground

by axman

HTML

<div id="appbt"> 
  <button v-on:click="toast">Toast bread</button> 
  <button v-on:click="untoast">UnToast bread</button>
  <input v-model="toastedBreads" /> 
  Quantity to put in the oven: {{toastedBreads}} 
</div>
<div id="app">
<ul> 
  <li v-for="(world, i) in worlds"> 
    {{world}} 
  <button @click="worlds.splice(i, 1)">Zap!</button> 
  </li> 
</ul> 
<input v-model="newWorld"/> 
<button @click="worlds.push(newWorld)">Conquer</button>
</div>

JavaScript

var vm = new Vue({ 
  el: '#app', 
  data: { 
    worlds: [],
    newWorld: '' 
  } 
})

vm.worlds.push('L24-D')
vm.worlds.push('Terran')
vm.worlds.push('Ares')
vm.worlds.push('New Kroy')
vm.worlds.push('Sebek')
vm.worlds.push('Vestra')

 new Vue(
   {
   	el:'#appbt', 
   	methods:{
    	toast(){
        	this.toastedBreads++ 
          },
       untoast(){
       		this.toastedBreads--
       }
			},
      data: { 
        toastedBreads: 0 
      } 
		}
 )