投稿者: 
最近携わっているVueについての備忘録。
v-for
ループのディレクティブとして用意されているのはv-forのみ。
基本構文
<script setup lang="ts">
import {ref} from "vue";
const weatherListInit = ['晴れ', '曇り', '雨']
const weatherList = ref(weatherListInit);
</script>
<template>
<section>
<h2>TITLE</h2>
<ul>
<li v-for="weather in weatherList" :key="weather">
{{weather}}
</li>
</ul>
<ul>
<li v-for="(weather, index) in weatherList" :key="weather">
{{index}} : {{weather}}
</li>
</ul>
</section>
</template>
//結果
// <ul>
// <li>晴れ</li>
// <li>曇り</li>
// <li>雨</li>
// </ul>
// <ul>
// <li>0 : 晴れ</li>
// <li>1 : 曇り</li>
// <li>2 : 雨</li>
// </ul>各要素を格納する変数をエイリアスと呼ぶ。
ループ対象タグに必須のv-bind:key
ループ処理によって生成された各要素をVue本体から識別するため、キー文字列をバインドする。v-for使用時には記述することを推奨されている。
連想配列のループ
<script setup lang="ts">
import {ref} from "vue";
const weatherListInit = {
1: "晴れ",
2: "曇り",
3: "雨"
}
const weatherList = ref(weatherListInit);
</script>
<template>
<section>
<ul>
<li v-for="(weather, id) in weatherList" :key="'weather' + id">
id が{{id}} のは天気は {{weather}}
</li>
</ul>
<ul>
<li v-for="(weather, id, index) in weatherList" :key="'weatherWithIndex' + id">
{{index}} : id が{{id}} のは天気は {{weather}}
</li>
</ul>
</section>
</template>
// v-for="(各要素の値を格納する変数, 各要素のキーを格納する変数) in ループ対象"
// v-for="(各要素の値を格納する変数, 各要素のキーを格納する変数, インデックスを格納する変数) in ループ対象"オブジェクトの配列のループ
for inで回した各要素にはオブジェクトが入ってくるから、ドットアクセスで取り出す。
<script setup>
const weatherListInit: Weather[] = [
{id: 1, title: '今日の天気', content: '晴れ'},
{id: 2, title: '明日の天気', content: '曇り'},
{id: 3, title: '明後日の天気', content: '雨'}
]
// インターフェースで型定義
interface Weather {
id: number;
title: string;
content: string;
}
const weatherList = ref(weatherListInit);
</script>
<template>
<ul>
<li v-for="weather in weatherList" :key="weather.id">
{{weather.title}}は{{weather.content}}
</li>
</ul>
</template>カウンタ変数を利用したループ
ループしたい数をinの右側に設定。開始時の値は1で固定されている。
<template>
<ul>
<li v-for="r in 5" :key="r">
半径{{r}} の円周は{{r * 2 * 3.14}}
</li>
</ul>
</template>
// 結果
//<ul>
// <li> 半径1 の円周は6.28</li>
// <li> 半径2 の円周は12.56</li>
// <li> 半径3 の円周は18.84</li>
// <li> 半径4 の円周は25.12</li>
// <li> 半径5 の円周は31.400000000000002</li>
//</ul>リスト操作
ループ対象データ絞り込み
filterを使用して値段が500のみの新たな配列を作成。
<script setup lang="ts">
import {ref, computed} from "vue";
const alcoholDataListInit : Alcohol[] = [
{id: 1, name: 'Beer', price: 500},
{id: 2, name: 'Wine', price: 600},
{id: 3, name: 'Sake', price: 700},
{id: 3, name: 'Wiskey', price: 500},
]
interface Alcohol {
id: number;
name: string;
price: number
}
const alcoholDataList = ref(alcoholDataListInit);
const alcohol500 = computed((): Alcohol[] => {
const newList = alcoholDataList.value.filter(
(alcoholItem: Alcohol): boolean => {
return alcoholItem.price == 500
}
)
return newList
})
</script>
<template>
<section>
<h2>TITLE</h2>
<ul>
<li v-for="alcoholItem in alcohol500" :key="alcoholItem">
{{alcoholItem.name}}値段は{{alcoholItem.price}}
</li>
</ul>
</section>
</template>
// 結果
//<ul>
// <li>Beer値段は500</li>
// <li>Wiskey値段は500</li>
//</ul>配列のデータ操作
元となる配列を操作した際の動き。
追加削除などは実務でもよく使用する。リアクティブシステムが作用して、配列を操作することで、表示も即座に変化する。
<script setup lang="ts">
import {ref} from "vue";
const weatherListInit: string[] = ['晴れ', '曇り', '雨']
const weatherList = ref(weatherListInit);
// 配列の内容を全て変更
const changeWeatherList = (): void => {
weatherList.value = ['霰', '台風', '雹']
}
// 要素を追加
const addWeatherList = (): void => {
weatherList.value.push('霧')
}
// 末尾を削除
const deleteFromWeatherList = (): void => {
weatherList.value.pop()
}
</script>
<template>
<section>
<h2>TITLE</h2>
<ul>
<li v-for="(weather, index) in weatherList" :key="weather">
{{index}} : {{weather}}
</li>
</ul>
<p>weatherListを
<button v-on:click="changeWeatherList">変更</button>
</p>
<p>weatherListに
<button v-on:click="addWeatherList">追加</button>
</p>
<p>weatherListの末尾を
<button v-on:click="deleteFromWeatherList">削除</button>
</p>
</section>
</template>参考書籍：Vue 3 フロントエンド開発の教科書
c.sakyou