JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div id="app">
  <ul>
    <li v-for="(ingeridient, i) in ingerdiants" :key="ingeridient">{{ ingeridient }} ({{ i }})</li>
  </ul>
  <hr>
  <ul>
    <li v-for="person in persons">
      <div v-for="(value, key) in person">{{ key }} : {{ value }}</div>
    </li>
  </ul>
  <button @click="ingerdiants.push('spices')">Add New</button>
  
  <span v-for="n in 10">{{ n }}</span>
  <hr>
  <template v-for="(ingeridient, index) in ingerdiants">
  <h1>{{ ingeridient }}</h1>
  <p>{{ index }}</p>    
  </template>

</div>

JavaScript

new Vue({
	el: '#app',
  data:{
  	ingerdiants: ['meat', 'fruit', 'cookies'],
    persons: [
    	{name: 'John', age:25, color:'red' },
      {name: 'Doe', age:'unknown', color:'blue'}
    ]
  }
})