オブジェクトやオブジェクトの配列ループサンプル

オブジェクトのループ例

<script setup lang="ts">
import {ref} from "vue";

<!--TypeScript オブジェクト型リテラル-->
const whiteLadyInit: {
	id: number;
	name: string;
	price: number;
	recipe: string;
} = {
	id: 2345,
	name: "ホワイトレディ",
	price: 1200,
	recipe: "ジン30ml+コワントロー15ml+レモン果汁+15ml"
};
const whiteLady = ref(whiteLadyInit);
</script>

<template>
	<dl>
		<template
			v-for="(value, key) in whiteLady"
			v-bind:key="key">
			<dt>{{key}}</dt>
			<dd>{{value}}</dd>
		</template>
	</dl>
</template>

オブジェクトの配列ループ例

<script setup lang="ts">
import {ref} from "vue";

const cocktailDataListInit: Cocktail[]  = [
	{id: 2345, name: "ホワイトレディ", price: 1200},
	{id: 4412, name: "ブルーハワイ", price: 1500},
	{id: 6792, name: "ニューヨーク", price: 1100},
	{id: 8429, name: "マティーニ", price: 1500}
];
const cocktailDataList = ref(cocktailDataListInit);

<!--TypeScript インターフェース。オブジェクトの型定義を再利用する場合に用いる。-->
interface Cocktail {
	id: number;
	name: string;
	price: number;
}
</script>

<template>
	<ul>
		<li
			v-for="cocktailItem in cocktailDataList"
			v-bind:key="cocktailItem.id">
			{{cocktailItem.name}}の値段は{{cocktailItem.price}}円
		</li>
	</ul>
</template>