Error: The 'itemsNav' property is not part of the '{}' type. (Code: 2339)

I'm struggling to figure out the issue with itemsNav.

<script setup lang="ts">
import { ref } from 'vue'
import { list } from '../../constants/NAV';

const itemsNav = ref(list)

</script>

                <li 
                    v-for="item of itemsNav"
                    :key="item.id"
                >
                    {{ item.label }}
                </li>
interface NavList {
    id?: number,
    label?: string,
    link?: string,
}

export const list: NavList[] = [
    {id: 1, label: 'худшие компании', link: '#'},
    {id: 2, label: 'новости', link: '#'},
    {id: 3, label: 'о проекте', link: '#'},
]

I've noticed an issue with NAV.ts. I even tried simplifying it to just const nav = [1, 2, 3] but that didn't resolve the problem either

I searched for solutions in other similar threads, but couldn't find the right one. It appears that TypeScript may have introduced a new validation in their latest update

Answer №1

According to the ref() method mentioned in the official documentation, it will return an object with a field called .value. You can try implementing it like this:

v-for="item of itemsNav.value"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure buttons remain on the same line in Vue.js?

In a table, I have three buttons that are placed on top of each other when the data in the row is too long and expands the table. My goal is to keep these three buttons in one line regardless of the content length. <td class="text-xs-right"> <d ...

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

Exploring the Viability of Utilizing TypeScript and ES6 Modules for a Compact Library Package

Currently, our team is in the process of developing a custom JavaScript library for integration with one of our flagship products. The development workflow involves: Utilizing TypeScript and internal modules to create namespaced classes (internal and pub ...

Error thrown due to syntax issues in react.d.ts declaration file in TypeScript

Currently, I am attempting to integrate react with typescript in my project. However, typescript is generating syntax errors for the react.d.ts file sourced from Github: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react The encountered ...

React Router malfunctioning on production environment when integrated with an Express backend

My Single Page application is built using React for the frontend and Express for the backend. Within the application, there are two main components: and . The goal is to display the component when the "/"" URL is requested, and show the component for an ...

Leveraging Angular2+ components across various modules

Bringing in a component called "TemperatureComponent" into a module named "DashboardModule" and defining + exporting it there: import { TemperatureComponent } from './temperature/temperature.component'; import { TemperatureDraggerComponent } from ...

Exploring the World of ESLint, Prettier, Typescript, and VScode Configuration

There is a common belief that Prettier is the preferred tool for formatting, while ESlint is recommended for highlighting linting errors, even though ESlint also has formatting capabilities. However, it should be noted that Prettier lacks certain advanced ...

Steps for creating a button that increments by using ng loop:1. Begin

I am attempting to create a button that can be used to increment and decrement. However, I am facing an issue where all input fields are being affected instead of just one. This is the code in body.component.html <div class="items-detail-detail" *n ...

The default route in Laravel is not functioning properly in conjunction with Vue.js

I am currently working on a single page application with Laravel and Vue, but I'm facing an issue where the index component is not loading upon initial page load. In my web.php file: Route::get('{any}', function () { return view('welco ...

Enhance TypeScript in WebStorm: Update or Upgrade the bundled version

What is the best way to update or upgrade the default version? https://i.sstatic.net/hQFUd.png Important note: I prefer not to manually modify and switch to a custom version like: https://i.sstatic.net/wejP7.png ...

Terminating a function during execution in JavaScript/TypeScript

Currently, I am in the process of developing a VSCODE extension using TypeScript. Within this extension, there is a particularly large function that is frequently called, but only the final call holds significance. As a solution, I am attempting to elimina ...

(modify) Activation of work functionality in Angular 2 strictly tied to pressing enter

I am working on a feature that displays rows matching a user-entered value in a dynamic list. The list should update as the user types in values, so I attempted to use a (change) event listener on the input text box. However, the list only updates when I ...

Leverage C# model classes within your Angular application

Just wanted to express my gratitude in advance import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-fetch-data', templateUrl: './fetch-data. ...

Prevent Nuxt from refreshing the page when the URL is modified

Currently, I am in the process of transitioning an application to Nuxt3 and encountering an issue regarding page reloading when the URL changes. Within my application, I have multiple links that all lead to the same page. To address this issue, I had to ma ...

Using NgModel with a custom element

I am currently using a basic component within my form as shown below: <app-slider [min]="field.min" [max]="field.max" [value]="field.min"></app-slider> This component consists of the following code: HTML: <input #mySlider class="s ...

Icon for closing Mui Snackbar

I am facing an issue with my notification component that uses the mui snackbar to display alerts. I want to display multiple notifications stacked vertically, but when I try to close one notification using the "Close" icon, it ends up closing both that o ...

What is the reason behind capitalizing Angular CLI class file imports?

After creating a basic class in Angular using the CLI starter, I encountered an issue when trying to use the imported class. Instead of functioning as expected, it returned an empty object. Through troubleshooting, I discovered that simply changing the fil ...

Creating generic output types in TypeScript based on the input types

In my React-Native project, I'm focusing on implementing autocomplete and type validation. One of the challenges I'm facing is configuring the types for the stylesheet library I am using. A customized stylesheet is structured like this: const s ...

creating a live countdown on rows of a table using vuejs

Check out this jsfiddle link Within vuejs, I have a table with countdown functionality for listing data. However, I'm facing an issue where I cannot initiate multiple countdowns in separate rows of the table. To illustrate this problem further, I hav ...