Vue中v-for循环无法获取数组数据，如何解决shows未定义警告？

问题说明 #

使用Vue的<script setup>语法定义了响应式数组shows，但在模板中用v-for循环渲染时，触发警告：[Vue warn]: Property "shows" was accessed during render but is not defined on instance.。此前尝试在传统data()方法中声明数据，因语法不匹配未生效。

解决方案 #

1. 导入ref响应式API #

在<script setup>中使用ref必须先从vue包导入，否则定义的变量无法被模板识别为响应式数据。

2. 启用模板中的循环代码 #

当前模板里的循环渲染代码处于注释状态，需要取消注释，并移除硬编码的静态内容。

完整代码示例 #

模板代码 #

<template>
  <div class="md:flex justify-center">
    <div class="md:flex gap-10">
      <!--  Calendar -->
      <div id="vanilla-calendar"></div>

      <!-- Day Details -->
      <!-- 循环渲染shows列表 -->
      <div class="roll-box">
        <div
          class="show-column"
          v-for="(show, index) in shows"
          :key="index"
        >
          <div class="circle-bg">
            <div class="date">{{ show.date }}</div>
            <div class="month">{{ show.month }}</div>
          </div>

          <div class="show show-box">
            <div class="show-name">
              {{ show.showName }}
            </div>
            <div class="show-desc">{{ show.showDesc }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

脚本代码 #

import { ref } from 'vue';

const shows = ref([
  {
    date: "15",
    month: "JUN",
    showName: "Piano Duo Recital by Lucas & Arthur Jussen",
    showDesc: "Hong Kong Museum of Art",
  },
  // 可添加更多演出数据
]);

关键说明 #

• <script setup>中声明的变量会自动暴露给模板，但前提是使用Vue提供的响应式API（如ref、reactive）且正确导入。
• 若未导入ref，shows只是普通JavaScript变量，无法被模板识别，就会触发“未定义”警告。

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