<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import CCSelect from '../CCSelect.vue'

const path = ref('')
const options = ['肉肉肉肉肉肉肉肉肉肉肉肉肉肉肉肉', '野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜野菜', '魚', '果物', 'その他']
// const options = [
//   { label: '肉', value: 1 },
//   { label: '野菜', value: 2 },
//   { label: '魚', value: 3 },
//   { label: '果物', value: 4 },
//   { label: 'その他', value: 5 },
// ]
</script>

<template>
  <div class="page">
    <CCSelect class="_navi" v-model="path" :options="options" />
    {{ options }}
  </div>
  <div>stringの配列で与えられた場合、labelとvalueは同一のものになる</div>
  <div>Your select value is {{ path }}</div>
</template>

<style scoped>
.page {
  padding: 20px;
  background-color: #f0f0f0;
}
</style>
