Vue.js 3生产构建中select组件v-model绑定失效问题求助

问题原因 #

你遇到的核心问题是同时混用了<script setup>语法糖与传统选项式API的<script>标签：

• 开发环境下Vue的调试模式会做兼容处理，允许模板直接访问选项式API中定义的变量；
• 生产构建时，代码压缩与tree-shaking机制会剔除未被显式引用的变量，导致选项式API里的selected_event、event_dates无法被模板正确识别，最终抛出未定义错误。

解决方案 #

方案1：统一使用<script setup>语法糖（推荐）

将数据定义移至<script setup>中，用Vue3的响应式API创建变量，确保作用域明确，避免生产构建的优化问题：

<script setup>
import BreezeGuestLayout from '@/Layouts/Guest.vue';
import { Head, Link } from '@inertiajs/inertia-vue3';
import { ref } from 'vue';

// 用ref创建响应式数组
const event_dates = ref([
    {
        id: 1,
        start_date: "2022-10-30",
        weekday: "Sunday",
        select_text: "Joes Birthday",
    },
    {
        id: 2, // 修正原代码中重复的id值
        start_date: "2022-11-14",
        weekday: "Monday",
        select_text: "Wedding-Day",
    }
]);
// 用ref创建响应式变量绑定v-model
const selected_event = ref(null);
</script>

<template>
    <BreezeGuestLayout>
        <div class="m-4">
            <div class="d-flex align-items-center mb-8">
                <select v-model="selected_event">
                    <option
                        v-for="event_date in event_dates"
                        :key="event_date.id"
                        :value="event_date"
                    >
                        {{ event_date.weekday }}: {{ event_date.start_date }}, {{ event_date.select_text }}
                    </option>
                </select>
            </div>

            <h4 v-if="selected_event">
                Selected Event: {{ selected_event.select_text }} at {{ selected_event.start_date }}
            </h4>
        </div>
    </BreezeGuestLayout>
</template>

方案2：移除<script setup>，使用纯选项式API

如果需要保留传统写法，直接删除<script setup>标签，将所有依赖与逻辑统一放在选项式API中：

<template>
    <BreezeGuestLayout>
        <div class="m-4">
            <div class="d-flex align-items-center mb-8">
                <select v-model="selected_event">
                    <option
                        v-for="event_date in event_dates"
                        :key="event_date.id"
                        :value="event_date"
                    >
                        {{ event_date.weekday }}: {{ event_date.start_date }}, {{ event_date.select_text }}
                    </option>
                </select>
            </div>

            <h4 v-if="selected_event">
                Selected Event: {{ selected_event.select_text }} at {{ selected_event.start_date }}
            </h4>
        </div>
    </BreezeGuestLayout>
</template>

<script>
import BreezeGuestLayout from '@/Layouts/Guest.vue';
import { Head, Link } from '@inertiajs/inertia-vue3';

export default {
    name: "BookingIndex",
    components: {
        BreezeGuestLayout,
        Head,
        Link
    },
    data() {
        return {
            event_dates: [
                {
                    id: 1,
                    start_date: "2022-10-30",
                    weekday: "Sunday",
                    select_text: "Joes Birthday",
                },
                {
                    id: 2, // 修正重复id
                    start_date: "2022-11-14",
                    weekday: "Monday",
                    select_text: "Wedding-Day",
                }
            ],
            selected_event: null,
        }
    }
}
</script>

额外提示 #

原代码中两个event_date的id值重复，建议修正为唯一值，避免v-for的key冲突问题。

内容的提问来源于stack exchange，提问作者Laberkopf