vue.js - Keeping track of elements when using v-for

by Rodwyn Moreno

HTML

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

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

JavaScript

new Vue({
	el: '#app',
  data: {
  	ingredients: ['meat', 'fruit', 'cookies']
  }
});