Vueリストのことはじめ色々

v-for

静的リスト

<script setup lang="ts">
const items = [{ id: 0, name: "ポーション", price: 100 }, { id: 2, name: "ハイポーション", price:200 }];
</script>

<template>
  <div class="container"></div>
    <h1>アイテム屋</h1>
    <div class="item-container">
      <ul>
        <li v-for="item in items" :key="item.id" class="item-list">
          <span>{{ item.name }} {{ item.price }}</span>
        </li>
      </ul>
    </div>
</template>

動的リスト

要素の追加

オブジェクトはリアクティブにしておく。

動的リスト

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

const items = ref([{ id: 0, name: "ポーション", price: 100 }, { id: 2, name: "ハイポーション", price:200 }]);

const inputtingName = ref<string>("");
const inputtingPrice = ref<number>(0);

const postItem = () => {
  const item = { id: Math.random(), name: inputtingName.value, price: inputtingPrice.value };
  items.value.push(item);
  inputtingName.value = "";
  inputtingPrice.value = 0;
  console.log('post...', items.value);
}
</script>

<template>
  <div class="container"></div>
    <h1>アイテム屋</h1>
    <div class="form-container">
      <input v-model="inputtingName"/>
      <input v-model="inputtingPrice"/>
      <button class="save-button" @click="postItem()">post</button>
    </div>
    <div class="item-container">
      <ul>
        <li v-for="item in items" :key="item.id" class="item-list">
          <span>{{ item.name }} {{ item.price }}</span>
        </li>
      </ul>
    </div>
</template>

要素の削除

deleteItem関数はIDが不一致のオブジェクト要素のみ再格納する
（IDが一致したオブジェクト要素は削除される）

削除機能を追加

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

const items = ref([{ id: 0, name: "ポーション", price: 100 }, { id: 2, name: "ハイポーション", price:200 }]);

const inputtingName = ref<string>("");
const inputtingPrice = ref<number>(0);

const postItem = () => {
  const item = { id: Math.random(), name: inputtingName.value, price: inputtingPrice.value };
  items.value.push(item);
  inputtingName.value = "";
  inputtingPrice.value = 0;
  console.log('post...', items.value);
}

const deleteItem = (id: number) => {
  items.value = items.value.filter(t => t.id !== id)
}
</script>

<template>
  <div class="container"></div>
    <h1>アイテム屋</h1>
    <div class="form-container">
      <input v-model="inputtingName"/>
      <input v-model="inputtingPrice"/>
      <button class="save-button" @click="postItem()">post</button>
    </div>
    <div class="item-container">
      <ul>
        <li v-for="item in items" :key="item.id" class="item-list">
          <span>{{ item.name }} {{ item.price }}</span>
          <button class="delete-button" @click="deleteItem(item.id)">delete</button>
        </li>
      </ul>
    </div>
</template>

v-if

リストが空の場合のみ文字列を表示させる

v-if

<template>
  <div class="container"></div>
    <h1>アイテム屋</h1>
    <div class="form-container">
      <input v-model="inputtingName"/>
      <input v-model="inputtingPrice"/>
      <button class="save-button" @click="postItem()">post</button>
    </div>
    <div class="item-container">
      <p v-if="items.length <= 0">Sold Out</p>
      <ul v-else>
        <li v-for="item in items" :key="item.id" class="item-list">
          <span>{{ item.name }} {{ item.price }}</span>
          <button class="delete-button" @click="deleteItem(item.id)">delete</button>
        </li>
      </ul>
    </div>
</template>

参考