JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<div id="app">
  <todo-list inline-template>
    <div class="todo-list">
      <ul>
        <li v-for="todo,index in todo_list">
          <input type="checkbox" v-model="todo.done">
          <label v-text="todo.body"></label>
        </li>
      </ul>
      
      <hr>
      <h2>Raw Data...</h2>
      <pre>{{ todo_list }}</pre>
    </div>
  </todo-list>
</div>

Babel + JSX

Vue.component('todo-list', {
	data() {
  	return {
    	todo_list: [
      	{ body: 'Milk',    done: true },
        { body: 'Cheese',  done: true },
        { body: 'Eggs',    done: true },
        { body: 'Ham',     done: false },
        { body: 'Chicken', done: false },
        { body: 'Pies',    done: true }
      ]
    }
  }
});

new Vue({
	el: '#app'
})