<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>
