Vue3预约系统中v-if与v-for无法渲染预期数据问题

核心问题分析 #

你遇到的问题根源在于：

• 响应式变量appointments初始值设为null，模板中直接使用appointments.value会触发undefined错误（模板里访问ref无需手动加.value，Vue会自动解包）；
• 初始值为null时，v-for循环会因遍历非数组类型报错，导致渲染失败。

具体修复步骤 #

1. 调整响应式变量初始值
   把const appointments = ref(null);改为：

const appointments = ref([]);

初始化为空数组，既符合数据类型预期，又能避免null带来的判断和循环报错。

2. 修正模板中的判断与循环逻辑
   模板里不需要手动加.value，直接使用ref变量名，并用数组长度判断是否有数据：

<template>
  <VueDatePicker @select="onDateSelect" />
  
  <!-- 用length判断是否有可用时段，避免空渲染或报错 -->
  <div v-if="appointments.length">
    <button 
      v-for="slot in appointments" 
      :key="slot.id"
    >
      {{ slot.time }}
    </button>
  </div>
</template>

3. 确认赋值逻辑正确性
   确保日期选择后赋值的是标准数组，比如模拟数据：

const onDateSelect = (date) => {
  appointments.value = [
    { id: 1, time: '09:00 - 10:00' },
    { id: 2, time: '10:00 - 11:00' },
    { id: 3, time: '14:00 - 15:00' }
  ];
};

为什么这样能解决问题 #

• 空数组作为初始值，模板渲染时appointments.length为0，v-if不显示内容，避免了null导致的判断错误；
• Vue模板会自动解包ref变量，直接写appointments就能访问其响应式值，无需手动加.value；
• v-for遍历数组类型数据不会报错，赋值后数组长度大于0，v-if触发显示，时段按钮正常渲染。

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