Zenn
🐗

Vuetify3.4 + Vue3（Composition API） 備忘録

2024/01/20に公開
Composition API
Vue 3
Vuetify 3
tech

v-select

選択時、表示する値と変数に渡す値を別々にする

セレクトボックスで選択された項目の値は反映させたいが、refで受け取る値は別にしたいときがある。（表示する値以外で次の画面で表示する値を変えたい時など）

そんな時にはSlot機能を使ってリストアイテムにイベントを設定することができる。

Select.vue
<template>
  <v-select v-model="selectedName" :items="products" item-title="name">
    <template #item="{ props, items }">
      <v-list-item v-bind="props" @click="cart = item.raw.id">
      </v-list-item>
    <template>
  </v-select>
</template>

<script setup>
const products = [
  { id: "T001", name: "Marlboro", price: 600 },
  { id: "T002", name: "Seven Star", prive: 600 },
];
const selectedName = ref(""); // 表示する値
const cart = ref("");       // クリック時に受け取る値
</script>

Discussion