JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

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

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

JavaScript

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