Nuxt 3 / Vue 3 中的简单数组

Question

我试图在模板中显示一个非常简单的数组。我不明白为什么这不起作用。

我通过 try/catch 语句获取数据。数据是 JSON，里面有一个数组，所以我想这说明它是多级数组。

常量在console.log 中正确显示，但在模板中不正确。

尝试显示数据

<template>

<!-- This doesn't return anything -->

{{modules}}

<!-- Neither does this -->

<span v-for="(item, index) in modules" :key="index">{{item}}</a>

<!-- This works as it should -->

<li v-for="company in companies" :key="companies.company_name">                

{{ company.company_name }}
{{ company.app_modules }}

<pre>{{ company }}</pre>

</li>

</template>

获取数据

const companies = ref([])

try {

// Await and get the data

  companies.value = data
  const modules = data[0].app_modules

  // This logs the array
  console.log(modules)

} catch (e) {
  console.error(e)
}

“模块”数组就是这么简单

[
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9"
]

Answer 1

您的代码有几个问题。

我假设您正在使用脚本设置。

首先，const modules 的作用域仅在 try catch 块内。它在它外面是不可见的，因此你不能在模板中使用它，因为它是未定义的。如果你在 try catch 块之外尝试 console.log(modules)，它会打印 undefined。

script setup 将隐式导出在其范围内定义的所有变量和函数，但是函数或 try...catch 块内的变量将不会返回，因为它们的范围不在根级别。

同样，如果您使用setup() {}，您会明确返回您希望在模板中可见的内容。

---

为了解决这个问题，我会创建一个引用，就像你对公司所做的一样，并在 try catch 块中分配给它。

modules.value = data[0].app_modules

或者，您可以在 try catch 块之外使用 let modules 并在那里分配给它。

let modules;

try {
    modules = data[0].app_modules
} catch (e) {
}

其次，您不是用 </span> 关闭 <span> 元素，而是 </a>。

解决这两个问题应该可以正确渲染。

Answer 2

好吧，问题是你不能在 try 块中使用“const”。

我知道这是一个草率的例子，但是有一堆代码，我试图在没有所有分散注意力的情况下搞定重点。

抱歉给您带来不便 :D