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

# v-for

```vue:静的リスト
<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>
```

# 動的リスト

## 要素の追加

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

```vue:動的リスト
<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が一致したオブジェクト要素は削除される）

```vue:削除機能を追加
<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

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

```vue: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>
```

# 参考

https://www.udemy.com/course/vue3-typescript/