如果我在 Nuxt 3 项目的 <script setup> 中定义了列表，为什么列表未定义？

Question

我有一个 Nuxt 3 项目，我创建了一个生成可变数量元素的组件，为此元素在调用时会得到一个数组。 在脚本设置中，我将此数组定义为列表，并且我想在已安装的函数中使用它来将某些数据点映射到我的数据上。

这是正在使用的组件，其中数组被传递给元素，每个变量（x.data.attr..）都是一个字符串。

            <Menu :items="[
                {
                    bildURL: x.data.attributes.BildKasten1.data.attributes.url,
                    Text: x.data.attributes.TextKasten1,
                    KartenTitel: x.data.attributes.KartenTitel1
                },
                {
                    bildURL: x.data.attributes.BildKasten2.data.attributes.url,
                    Text: x.data.attributes.TextKasten2,
                    KartenTitel: x.data.attributes.KartenTitel2
                },
            ]"/>

我的设置：

<script lang="ts" setup>
import { faThList } from '@fortawesome/free-solid-svg-icons';


const props = defineProps({
    items: {
        Array,
    }
})

const list = ref(props.items.map( (item) => {
    return {...item, open: false};
    })
);


</script>

我的普通脚本标签（删除了这些方法，因为它们与此无关）：

</script>

<script lang="ts">
    export default {
    mounted() {
        console.log(list)
        for(i in list){
            this.obj[i.KartenTitel] = idx > 0 ? false : true
        }
    },
    data() {
        return {
            obj:{},
        }
    },

}
</script>

现在它不起作用并且控制台记录：

Uncaught (in promise) ReferenceError: list is not defined

最奇怪/最令人沮丧的部分是，当我昨天将其关闭时，它起作用了。今天却没有。中间我什么也没做。 我怎样才能让它再次工作？为什么它不起作用？ 列表是在设置中定义的，所以不应该定义它吗？

Answer 1

如 Vue 3 文档中所示，建议仅使用组合 api 并在选项 api 中使用 setup()

 选项，如下所示（而不是 2 个 

<script>

）：

<script>
  export default {
    setup() {
      // composition API
    },

    // options API
  }
</script>

如果您已经有选项 API 代码库。否则，您应该只选择其中之一。

就您而言，为什么您不在

onMounted(() => {})

中使用

<script setup>