Vue.js - Rendering lists with v-for

section 3

by hyeyoon

HTML

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

<div id="app">
  <ul>
    <!-- index가 뒤에 위치하면 어떤 용어가 와도 된다 -->  
    <!-- *** 43.Keeping Track of Elements when using v-for *** -->
    <li v-for="(ingredient, i) in ingredients" :key="ingredient">{{ ingredient }} ({{ i }})</li>
  </ul>
  <button @click="ingredients.push('spices')">Add New</button>
  <template v-for="(ingredient, index) in ingredients">
    <h1>{{ ingredient }}</h1>
    <p>{{ index }}</p>
  </template>
  <hr>
  <ul>
    <li v-for="person in people">
      <!-- key와 value를 함께 loop할 경우 value, key 순서로 해야함 -->
      <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'],
    people: [
    	{name: 'Max', age: 27, color: 'red'},
      {name: 'Anna', age: 'unknown', color: 'blue'}
    ]
  }
});