最近携わっている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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA