Pug 模板不适用于 nuxt 变量

Question

我正在尝试在我的 nuxt 应用程序中运行一个简单的 pug for 循环。

我通过运行命令安装了https://www.npmjs.com/package/vue-pug-loader，并且语法似乎有效：

<template lang="pug">
  if (10 / 2) == 5
    p Hello world!
</template>

这正确地显示了 hello world，for 循环也是如此

<template lang="pug">
  for item in ["1", "2", "3"]
    p #{item}
</template>

但是每当我尝试使用脚本中的变量时，它都会抛出错误：

Cannot read properties of undefined (reading 'length')

<template lang="pug">
  for item in pages // error triggers here
    p #{item}
</template>

<script>
let pages = ["1", "2", "3"]
</script>

<style>
</style>

我做错了什么？

Answer 1

<script>
let pages = ["1", "2", "3"]
</script>

<script>

和

<script setup>

不同，请参阅 API 样式。

<script>

中的顶级变量不会暴露于

<template>

。

您只需将

<script>

更改为

<script setup>

，或者：

<script>
export default defineComponent({
  setup() {
    let pages = ["1", "2", "3"]
    return { pages }
  }
})
</script>

或使用选项 API：

<script>
export default defineComponent({
  data() {
    return { pages: ["1", "2", "3"] }
  }
})
</script>