JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

JavaScript

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  },
	components: {
		'todo-item': {
			 props: ['todo'],
 			 template: '<li>{{ todo.text }}</li>'
		}
	}
})