Unknown type encountered when using v-for with Vue3 item

I'm currently going through a Laravel bootcamp and following along with the tutorial. However, I encountered an error when trying to display the model with VueJS using v-for loop. Here is my code:

type ChirpModel = {
  id: number,
  message: string,
  created_at: string,
  user: {
      user_id: number,
      name: string
    }
  }
const props = defineProps<{ chirps: Array<ChirpModel> }>()

and the v-for tags

        <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
            <Chirp v-for="c in props.chirps" :key="c.id" :chirp="c" />
        </div>

Unfortunately, I'm receiving a type error:

https://i.sstatic.net/6Jqgw.png

If anyone could point me in the right direction for finding a solution, any tips would be greatly appreciated.

I've searched through forums but haven't been able to pinpoint where I've gone wrong.

I came across this question on Stack Overflow 'Item' is of type 'unknown' in vue3 v-for loop, but since I'm using Typescript, the solutions provided did not work in my case.

Answer №1

In the template, you can write code without using props, such as:

 <Tweet v-for="t in tweets" :key="t.id" :tweetData="t" />

Answer №2

Ensure to import the specified type:

<script setup lang="ts">
import type TweetModel = {
  id: number,
  content: string,
  published_at: string,
  author: {
      author_id: number,
      name: string
    }
  };
defineProps<{ tweets: Array<TweetModel> }>()
</script>

Additionally, as pointed out by meir, you can directly access the tweets.

 <Tweet v-for="t in tweets" :key="t.id" :tweet="t" />

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

The type 'ElementClass' is lacking several key properties, specifically context, setState, forceUpdate, props, and refs

I'm currently developing a web application using NextJS with Typescript. During my testing phase with Jest+Enzyme, I encountered the following error message: ** Test suite failed to run TypeScript diagnostics (customize using `[jest-config].globals. ...

Can files be saved directly to a specific Google Drive public folder from a Laravel application?

Currently, I am in the process of developing a blog using Laravel 5.6 and PostgreSQL. Successfully deploying my fully functional blog on Heroku's Free tier was a major milestone. In my initial setup, I created a photo upload system where user file up ...

Is it possible to reset only certain data values in Vue without re-initializing the entire set?

In the development process, we often encounter the need to re-initialize data structures. One common method is as follows: function initialData() { return { is_active: true, is_collapsed: true, resetable_data: 'value' ...

I attempted to execute an art configuration on Metaplex, but I keep encountering the same issue. Despite numerous attempts to modify various settings, the problem persists

Error encountered while compiling TypeScript code on desktop using ts-node to generate art configuration traits: Unable to find module 'commander' or its corresponding type declarations. Unable to find module '@project-serum/anchor' or ...

Global variables created in Vue3 are not returning the expected value and are

Currently in the process of upgrading a project to Vue3, we have multiple files within the project's boot directory that create global variables: src/boot/auth.js src/boot/axios.js src/boot/cranky.js .... Each of these files defines global variables ...

Setting up CSS module class names in a Vue project using Vite js configuration

Within my vite.config.ts file, I have specified a configuration for CSS modules. return defineConfig({ ... css: { ... modules: { localsConvention: "camelCase", generateScopedName: "[name]__[local]__[hash:base64:2]" ...

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

Can variable values be utilized as a union type within Typescript?

I'm attempting to achieve a setup similar to the following example using Typescript: const fruitApple:string = 'Apple'; const fruitOrange:string = 'Orange'; export type FruitOptions = fruitApple | fruitOrange //the compiler doe ...

What is the proper method for typing unidentified exports that are to be used in TypeScript through named imports?

Currently, I am developing an NPM package that takes the process.env, transforms it, and then exports the transformed environment for easier usage. The module is structured like this: const transformedEnv = transform(process.env) module.exports = transf ...

Exploring the Scope of Variables in PHP Laravel Functions

In a Laravel controller, I am facing an issue where the parameter variable $idea is not defined in the 'whereIn' function. How can I make sure that $idea is accessible there? Any suggestions would be greatly appreciated! public static function f ...

The integration between Vue and Laravel for sending emails is experiencing technical glitches and is currently not functioning as expected

Hello, I'm facing an issue and need your assistance. Despite trying various solutions, nothing seems to work for me, and I can't figure out why. Here is the snippet of my Vue app.js: import './bootstrap'; import { createApp } from &ap ...

Tips for personalizing the webpack compilation process for transforming .vue files into .js files?

As a beginner in the realm of webpack plugins, I've grasped the idea behind the html-webpack-plugin, which empowers users to personalize the generation process of html files by webpack. In a similar vein, I am on the quest for a plugin tailored for . ...

What is the reason behind Typescript flagging a potential undefined value when checking for array length using a greater than comparison but not with an

Consider the following excerpt from a React component: const AccountInformation = (props: { readonly accountData: AccountData | undefined | null }) => { const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length === 1 ? false : t ...

Changing the start of the week to Monday instead of Sunday in the bliblidotcom vue-rangedate-picker

To commence this project, I require the week to initiate on Monday rather than Sunday. Strangely, the documentation for the Vue component does not specify if this is achievable. Is there a method to alter its course? Your assistance is greatly appreciated ...

NeedValidation.required, Validation.emailCheck

When creating a form in TypeScript, I encountered an issue: private _createForm() { this.addForm = this._formBuilder.group({ login: [ null, Validators.required ], name: [ null, Validators.required ], surname: [ null, Validators ...

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

Is subtyping causing issues in TypeScript's inheritance model?

I am currently utilizing TypeScript for my coding projects, and I have observed that it can allow the production of non-type-safe code. Despite implementing all the "strict" options available to me, the behavior I am experiencing goes against the principle ...

The @Input directive is not compatible with the OnPush change detection strategy

page.html <app-parcel-delivery-cost-promo [parcelDeliveryCost]="parcelDeliveryCost"> </app-parcel-delivery-cost-promo> page.ts changeDetection: ChangeDetectionStrategy.OnPush, parcelDeliveryCost: Partial<ParcelDeliveryCostModel>; ...

Unusual Interactions between Angular and X3D Technologies

There is an unusual behavior in the x3d element inserted into an Angular (version 4) component that I have observed. The structure of my Angular project is as follows: x3d_and_angular/ app/ home/ home.component.css hom ...

"Combining the power of VueJs with the versatility

Currently, I'm delving into the world of VueJS alongside Firebase (and VueFire), and I've hit a bit of a snag when it comes to organizing my data effectively. My scenario is rather straightforward. I have a database of suppliers and a database ...