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

Question

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

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

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 3

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',
    },
]

Answer 4

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',
    },
]