リストレンダリング

概要

v-for

v-forディレクティブを使用することで配列を基にした要素のリストをレンダリングできる。

Caution

参照元ではリストと書かれているがどちらかというと辞書型である。

<ul>
	<li v-for="todo in todos" :key~"todo.id">
		{{todo.text}}
	</li>
</ul>

このtodoは反復処理中の変数をあらわすローカル変数である。

for-in

keyにより<li>を配列内に対応する位置に正確に移動することができる。

リストの更新

リストの更新には二つの方法がある。

配列変更メソッドを呼び出す。

todos.value.push(newTodo)

配列を新しいものに置き換える。

todos.value = todos.value.filter( ... )

コード全文

<script setup>
import { ref } from 'vue'
 
// give each todo a unique id
let id = 0
 
const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])
 
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}
 
function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>
 
<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>