VueJs For Loop error: The property 'id' is not found on type 'unknown'

everything included

<script lang="ts" setup>

This is the interface I am dealing with

interface Ms {
    id: number;
    username: string;
}

and this is the array of objects that I have

const list: Ms[] = [
    {
        id: 1,
        username: 'mic',
    },
    {
        id: 2,
        username: 'mac',
    },
]

currently, in Vue.js, my goal is to display all items as links

<a v-for="m in list" :key="m.id" :href="m.id">{{ m.name }}</a>

Everything works smoothly except for the error message I keep getting in my IDE (VSCode) for m.id and m.name, saying:

const m: unknown
Property 'id' does not exist on type 'unknown'.ts(2339)

const m: unknown
Property 'name' does not exist on type 'unknown'.ts(2339)

I can use m['id'] as a temporary fix, but I'm looking for a permanent solution.

Answer №1

Initially, within your category, it needs to be 'username' rather than 'name'.

<a>{{ m.username}}</a>

Furthermore, the href attribute of the 'a' tag must have a string value, whereas your 'id' is currently a number type.

Answer №2

When dealing with objects that have fewer fields, simply access them using (m as Ms).id, (m as Ms).name.

For objects with more fields, you can handle them like this:

const dataList: any[] = [
    {
        id: 1,
        username: 'alice',
    },
    {
        id: 2,
        username: 'bob',
    },
]

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 hold out for a specific number of promises to be fulfilled and halt the resolution of any others

While working in TypeScript, I need to create around 100 instances of Promise. However, I am only interested in waiting for the resolution of 5 of them. Any promises beyond that can either be canceled (if feasible) or rejected since they are no longer requ ...

Issue encountered in Loopback 4: Error with @repository dependency injection (TypeError: Undefined property 'findOne')

As I set up Bearer Token authentication for my Loopback 4 application, I referenced this implementation guide: https://github.com/strongloop/loopback-next/tree/master/packages/authentication. Within my src/providers/auth-strategy.provider.ts file, I encou ...

Encountering a cross-origin resource sharing (CORS) error while attempting

My Vue App is being hosted on an express server (nodejs running on port 60702) with the following setup: 'use strict'; const fs = require('fs'); const path = require('path'); const express = require('express'); var h ...

Is it more beneficial to enhance the style within a vue.js app or to delegate the task to the website that is

Hello there! I am currently working on my first vue.js app and I could use some assistance in deciding on a design strategy. This app will be integrated into a page of a website that is created using Drupal 8. Both the app and the site will utilize bootstr ...

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui

Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array. I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using a hard ...

Utilizing VueJS to Establish a Binding Relationship with Props

One of my Vue components is named Avatar.vue, and it is used to create an avatar image based on user-defined props. The parameter imgType determines whether the image should have rounded corners or not. Here is the code: <template> <div> & ...

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

When using ngx-masonry, I encountered the following error message- ERROR in Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3 Specifications: Angular 4 ngx-masonry 1.1.4 ...

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

Convert TypeScript model to JSON while excluding properties with null values

When working with an Angular 4 App and a typescript model, I have defined a Person class as follows: export class Person{ fname:string, lname?:string } The 'lname' property in the model is optional. To populate the model in a component, I u ...

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

Is it possible to conceal a table element using [hidden] in Angular 2?

I have a table that includes buttons for adding rows. Table application Question: I am looking to hide the table element and add a show click event on the "Add" button. Here is an example of the HTML code: <div class="col-md-12"> <div class="pa ...

how do I address the issue of Property 'navigation' not being found in type 'Readonly<{}> &'?

Here are two snippets of code that I am having trouble with: CustomHeader.tsx import { View, StyleSheet, Button } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import Icon from 'react-native-vecto ...

Encountering an issue in Laravel when trying to retrieve data using relationships and the paginate() method

When I try to fetch data using paginate(10), Vue.js does not work. However, if I use paginate(5), it works fine. The code in the Controller with relationships in the model files is working fine and returns a 200 OK response. $results = Posts::with([' ...

What are some strategies for navigating the constraint of having multiple root elements in Vue.js?

Seeking assistance from the experts here to solve this particular issue. I have a dataset that looks like this: [ { title: 'Header', children: [ { title: 'Paragraph', children: [], }, ], }, ...

Is there a deeper philosophical rationale behind choosing to use (or not use) enums in TypeScript, along with string union types?

Recently, I delved into the world of enum and const enum in Typescript, causing some confusion. I grasped that const enum gets transpiled into simple values while regular enums do not. I also recognized certain distinctions between using string union type ...

The useEffect hook in React is signaling a missing dependency issue

Any tips on how to resolve warnings such as this one src\components\pages\badge\BadgeScreen.tsx Line 87:6: React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array react-hoo ...

Exploring the world of global Vuex monitoring

In my large web app, I have a Vuex store that supplies data to many Vue components. I want to log changes to Vuex states or getters, but I need to be able to do so globally without relying on a specific Vue component. This means I cannot use methods like ...

Nativescript encountered an error regarding faker: module './address' not found

Currently in the process of learning nativescript, I am experimenting with using faker to generate some data while working with typescript. Here are the versions I am using: Node - 6.9.4 Faker - 3.1.0 Typescript - 2.1.4 Encountered an error which i ...

Unexpected reduce output displayed by Vuex

In my Vuex store, I have two getters that calculate the itemCount and totalPrice like this: getters: { itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0), totalPrice: state => state.lines.reduce((total,line) = ...

Angular - Ensuring correct rendering of a subcomponent with input parameter on the first update

Here is a snippet of code showcasing a list of educations and a component: <cdk-virtual-scroll-viewport itemSize="5" class="list-scroll"> <app-education-item *ngFor="let education of loadedEducations" ...