JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<div id="app">

  <ul>
    <li v-for="(ingredient, i) in ingredients">{{ingredient}} ({{i}})</li>
  </ul>
  <button @click="ingredients.push('new1')">Add new</button>
  
  <hr>
  <ul>
    <li v-for="person in persons">
      <span v-for="(value, key, index) in person"> {{key}} {{value}} ({{index}})</span>

    </li>
  </ul>
   
</div>

<script src="https://unpkg.com/vue"></script>

JavaScript

new Vue({
    el: '#app',
    data: {
        ingredients: ['meat', 'fruit', 'carrot'],
        persons: [
        	{name: 'Max', age: 27, color: 'red'},                
	        {name: 'Anna', age: 'unknow', color: 'blue'}
        ]
    }
});