Vue.jsを使ってカスタムのセレクトボックスを作成し、オプションをdiv要素として表示する方法を説明します。以下はその具体的な例です。

HTML

id="app"のdiv要素は、Vueインスタンスのルート要素です。
custom-selectコンポーネントがv-modelでバインドされ、親コンポーネントのデータと選択されたオプションを連携させます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムセレクトボックス</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <custom-select :options="options" v-model="selectedOption"></custom-select>
        <p>選択されたオプション: {{ selectedOption }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="main.js"></script>
</body>
</html>

CSS

コンテナのスタイリング: .custom-select-containerは相対位置と固定幅を持っています。
セレクトボックスのスタイリング: .custom-select divは、セレクトボックスのようにスタイリングされています。
オプションのスタイリング: .custom-select-options divはデフォルトで非表示になっており、セレクトボックスがクリックされたときに表示されます。個々のオプションのdivにはパディングとホバーエフェクトが適用されています。
オープン状態: セレクトコンテナがopenクラスを持つときにオプションが表示されます。

.custom-select-container {
    position: relative;
    width: 200px;
}

.custom-select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.custom-select-options div {
    padding: 10px;
    cursor: pointer;
}

.custom-select-options div:hover {
    background-color: #eee;
}

.custom-select-container.open .custom-select-options {
    display: block;
}

JavaScript

Vueコンポーネント: custom-selectコンポーネントは、セレクトボックスとそのオプションを含むテンプレートを持っています。
プロパティ: コンポーネントはoptionsとvalueをプロパティとして受け取ります。
データ: コンポーネントのデータには、オプションの表示を追跡するisOpenと選択されたオプションを追跡するselectedOptionがあります。
ウォッチャー: コンポーネントはvalueプロパティを監視して、親データが変更されたときに選択されたオプションを更新します。
メソッド: toggleOptionsはオプションの表示/非表示を切り替え、selectOptionは選択されたオプションを設定し、inputイベントを発行して親コンポーネントを更新します。

Vue.component('custom-select', {
    template: `
        <div class="custom-select-container" @click="toggleOptions">
            <div class="custom-select">{{ selectedOption ? selectedOption : 'オプションを選択' }}</div>
            <div class="custom-select-options" v-if="isOpen">
                <div v-for="option in options" :key="option" @click="selectOption(option)">
                    {{ option }}
                </div>
            </div>
        </div>
    `,
    props: {
        options: {
            type: Array,
            required: true
        },
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isOpen: false,
            selectedOption: this.value
        };
    },
    watch: {
        value(newValue) {
            this.selectedOption = newValue;
        }
    },
    methods: {
        toggleOptions() {
            this.isOpen = !this.isOpen;
        },
        selectOption(option) {
            this.selectedOption = option;
            this.isOpen = false;
            this.$emit('input', option);
        }
    }
});

new Vue({
    el: '#app',
    data: {
        options: ['オプション1', 'オプション2', 'オプション3', 'オプション4'],
        selectedOption: ''
    }
});

この設定により、Vueを使用してカスタムのセレクトボックスを作成し、オプションをdiv要素としてスタイリングおよび管理することができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。

Vue.jsを使ってカスタムのセレクトボックスを作成する

HTML

CSS

JavaScript