filter()でループ対象のデータを絞り込む

filterおさらい

Array.prototype.filter() - JavaScript | MDN

filter() メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出したシャローコピーを作成します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

ループ対象データの絞り込み例

<script setup lang="ts">
import { ref, computed } 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);
const cocktail1500 = computed((): Cocktail[] => {
  //filter()メソッドを使って新たな配列を生成
  //引数は配列の各要素であるCocktailオブジェクト
  const newList = cocktailDataList.value.filter(
    (cocktailItem: Cocktail): boolean => {
      //値段が1500かどうかの結果を戻り値とする。
      return cocktailItem.price == 1500;
    }
  );
  return newList;
});

interface Cocktail {
  id: number;
  name: string;
  price: number;
}
</script>

<template>
  <section>
    全てのカクテルリスト
    <ul>
      <li v-for="cocktailItem in cocktailDataList" v-bind:key="cocktailItem.id">
        {{ cocktailItem.name }}の値段は{{ cocktailItem.price }}円
      </li>
    </ul>
  </section>
  <section>
    値段が1500円のカクテルリスト
    <ul>
      <li
        v-for="cocktailItem in cocktail1500"
        v-bind:key="'cocktail1500' + cocktailItem.id"
      >
        {{ cocktailItem.name }}の値段は{{ cocktailItem.price }}円
      </li>
    </ul>
  </section>
</template>

v-forとv-ifを同時に使わない

Priority A Rules: Essential | Vue.js

Vue.js - The Progressive JavaScript Framework

https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for