Nuxt 3/Vue 3中简单数组无法在模板渲染的问题求助

问题根源 #

你定义的modules是普通常量，没有用Vue的响应式API包裹，模板无法访问到这个变量；而companies用了ref()声明为响应式对象，所以能正常渲染。此外模板里还有两处语法错误：

• v-for的<span>标签错误用了</a>闭合
• 遍历companies时，key绑定的是companies.company_name（数组本身没有该属性），应该用company.company_name

修正方案 #

1. 将modules改为响应式变量

修改数据获取代码，把modules用ref()声明：

const companies = ref([])
// 声明为响应式变量
const modules = ref([])

try {
  companies.value = data
  // 给响应式变量赋值
  modules.value = data[0].app_modules
  console.log(modules.value)
} catch (e) {
  console.error(e)
}

2. 修复模板语法错误

修改模板里的标签闭合和key绑定：

<template>
  <!-- 现在可以正常显示数组内容 -->
  {{ modules }}

  <!-- 修复标签闭合，正常遍历数组 -->
  <span v-for="(item, index) in modules" :key="index">{{ item }}</span>

  <!-- 修复key绑定错误，正常渲染公司列表 -->
  <li v-for="company in companies" :key="company.company_name">                
    {{ company.company_name }}
    {{ company.app_modules }}
    <pre>{{ company }}</pre>
  </li>
</template>

关键说明 #

Vue模板只能读取响应式上下文内的变量（比如用ref/reactive声明的变量、props、计算属性等），普通的const/let变量不属于这个上下文，哪怕控制台能打印，模板也无法访问。

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