Vue Nuxt中获取的数组数据无法响应式渲染问题求助

AI 小北

2026-7-30

解决Vue 3中数组响应式问题

要让allItems数组具备响应式特性，在Vue 3的<script setup>中必须使用ref（或reactive）包装数组——普通变量声明无法触发Vue的响应式更新机制，这就是v-for不生效的核心原因。以下是具体修改方案：

1. 导入并使用`ref`创建响应式数组

从Vue核心库导入ref函数，用它初始化allItems为响应式空数组：

import { ref } from 'vue';
// 用ref包装并指定泛型类型，保证类型安全
const allItems = ref<StModel[]>([]);

2. 修改数组时访问`.value`属性

ref包装的数据需要通过.value才能修改，因此在fetch回调中调整数组操作逻辑：

// 注意：原代码中data是StModel[]类型，用扩展运算符将元素逐个推入，避免嵌套数组
allItems.value.push(...data);

3. 修正其他潜在问题

原代码中循环变量stocks应为导入的stks，否则会出现未定义错误
fetch的URL参数格式有误，"?="需改为合理参数键（比如"?apiKey="）

修改后的完整代码

<template>
  <div id="main">
    <div v-for="r in allItems" :key="r.title">
      <div class="grid">
        <div class="col">
          <div v-if="r && r.ticker" class="stockinfo">
            <span class="ttl">Title: </span><br />
            <span class="main-data"> {{ r.title}} </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { StModel, Results } from "~~/composables/StModel";
import { stks } from "~~/composables/stks.json";

const apiKey = "zzzz";
const allItems = ref<StModel[]>([]);

const getData = () => {
  stks.forEach((s) => {
    fetch(`https://zzz.com/a?apiKey=${apiKey}`)
      .then((response) => response.json() as Promise<StModel[]>)
      .then((data) => {
        allItems.value.push(...data);
      });
  });
};

// 调用函数触发数据请求
getData();
</script>