Nuxt.js 3 组件 Ajax 调用/Typescript 问题

Question

编辑：我更改了问题的代码和部分内容。 编辑 2：我添加了我的尝试来解决这个问题，但没有用。

我是 Nuxt.js 3 的新手，我尝试构建一个组件，一个导航栏，它基于 JSON 遍历菜单点。 我能够在 page-vue-file 中运行它，但不能在组件内部运行，我不知道为什么。

这是在 index.vue 文件中进行 ajax 调用的脚本，它确实有效：

指数.vue：

<script setup lang="ts">
const { data } = await useFetch(() => `https://www.immo-mustermann.de/wp-admin/admin-ajax.php`, { params: { action: 'get_main_menu'} })
console.log(data);
</script>

<template>
  <div>
    <Nav :mainmenu_data="data" />
    {{ data }}
  </div>
</template>

在组件 Nav.vue 中，我有这段代码：

导航：

<script setup lang="ts">
interface NavProps{
  mainmenu_data;
}
const props = defineProps<NavProps>()
const new_mainmenu_data = props.mainmenu_data.slice(0, -1);
const menu_json = JSON.parse(new_mainmenu_data)
</script>

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <NuxtLink class="navbar-brand" to="/">Max Mustermann Immobilien</NuxtLink>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
            <li class="nav-item" v-for="(nav_item, index) in menu_json" >
              <NuxtLink
                :to="nav_item.url"
                class="nav-link"
                activeClass="active"
                aria-current="page"
                >{{nav_item.title}}</NuxtLink
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </template>

这是我的 JSON：

{"item0" : {"id" : "2", "title" : "Startseite", "url" : "/"},"item1" : {"id" : "7", "title" : "Immobilien", "url" : "/immobilien/"},"item2" : {"id" : "9", "title" : "Kontakt", "url" : "/kontakt/"}}0

我的问题是，我不想在我的 index.vue 中调用，我希望它在我的 Nav.vue 组件中，所以它在每个页面上完成（如果用户将页面添加到后端，我顺便使用 WordPress ) 但我无法完成它。我试图将 ajax 调用转移到 Nav-Component，但出现错误：

带有 ajax 调用的新 Nav.vue 出现错误：

<script setup lang="ts">

const { data } = await useFetch(() => `https://www.immo-mustermann.de/wp-admin/admin-ajax.php`, { params: { action: 'get_main_menu'} })
console.log(data);
let menu_json = data.slice(0, -1);
menu_json = JSON.parse(menu_json)
</script>

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <NuxtLink class="navbar-brand" to="/">Max Mustermann Immobilien</NuxtLink>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
            <li class="nav-item" v-for="(nav_item, index) in menu_json" >
              <NuxtLink
                :to="nav_item.url"
                class="nav-link"
                activeClass="active"
                aria-current="page"
                >{{nav_item.title}}</NuxtLink
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </template>

在第 5 行我得到错误："The property 'slice' is unknown for type 'Ref <unknown>'"。所以我认为我的漏洞问题是打字稿问题。

Answer 1

我通过学习更多的 JavaScript 基础知识解决了这个问题。

<script setup lang="ts">

const { pending, data: result } = await useFetch(() => `https://www.immo-mustermann.de/wp-admin/admin-ajax.php`, { params: { action: 'get_main_menu'} })

let menu_json = result._value.slice(0,-1);
menu_json = JSON.parse(menu_json);

</script>

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <NuxtLink class="navbar-brand" to="/">Max Mustermann Immobilien</NuxtLink>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <p v-if="!result">Error</p>
          <ul v-else class="navbar-nav ml-auto mb-2 mb-lg-0">
            <li class="nav-item" v-for="(nav_item, index) in menu_json" >
              <NuxtLink
                :to="nav_item.url"
                class="nav-link"
                activeClass="active"
                aria-current="page"
                >{{nav_item.title}}</NuxtLink
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </template>

虽然我在第 5 行的编辑器“Visual Studio Code”中遇到此错误。有人知道如何解决吗？ Nav-Bar 仍然有效。

The property '_value' is unknown for type 'Ref <unknown>'