Nuxt.js 3 Component Ajax Call / Typescript Problem

Issue

EDIT: i changed the code and parts of the question. EDIT 2: i added my try to solve this, does not work.

I am quite new to Nuxt.js 3 and try to build a component, a Nav bar, that iterates through menu points based on JSON. I was able to get this running in a page-vue-file, but not inside of a component and i dont know why.

This is the script, making the ajax call inside of the index.vue-file, that actually works:

index.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>

Inside of the component Nav.vue, i have this code:

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>

This is my JSON:

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

My problem is, i dont want the call inside of my index.vue, i want it inside of my Nav.vue component, so its done on every page (in case the user adds pages to the backend, im using WordPress by the way) but i cant get it done. I tried to transfer the ajax call to the Nav-Component, but i get an error:

New Nav.vue with ajax call, has an error:

<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>

In line 5 i get the error: "The property 'slice' is unknown for type 'Ref <unknown>'". So i think my hole problem is a typescript one.

Solution

I solved the problem, by learning some more JavaScript fundamentels.

<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>

Allthough im getting this error in the editor "Visual Studio Code" on line 5. Does anybody know how to solve? The Nav-Bar is working none the less.

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

Answered By - nomainstream