Section 3-38

by Rushan Sakhibgareev

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
   <ul>
     <li v-for="(ingridient, i) in ingridients" :key="ingridient">
     {{ ingridient }} ({{ i }})</li>
   </ul>
   <hr>
   <ul>
      <li v-for="person in persons">
        <div v-for="(value, key, index) in person">
        {{key}}: {{value}} ({{ index }})
        </div>
      </li>
   
   </ul>
   <button @click="ingridients.push('spices')">
   Add New
   </button>
   <span v-for="n in 10">{{ n }}</span>
   <hr>
   <template v-for="(ingridient, index) in ingridients">
   <h1>
   {{ingridient}}
   </h1>
   <p>
   {{index}}
   </p>     
   </template>
</div>

JavaScript

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