I am trying to for loop the data from App.vue component by passing props to component . But while I try to display the contents I receive the Error in v-for. Please check the code and Error. I believe I did it right, but I RECEIVE THIS Error : any Property 'job' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{ jobs: { required: true; type: PropType<Job[]>; }; }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...>): W...'. Did you mean 'jobs'?Vetur(2551) I'm new to this. How do i fix this ?

<template>
        <div> 
            <ul>
                <li v-for="job in jobs" :key="job.id"></li>
                <h2>{{job.title}} in {{job.location}}</h2> //Error
            </ul>
            <div >
                <p> {{job.salary}} rupees </p> //ERROR
            </div>
        </div> 
    </template>
    
    <script lang="ts">
    import { defineComponent, PropType } from 'vue'
    import Job from '@/components/Job'
    
    export default defineComponent({
        props: {
            jobs: {
                required: true,
                type: Array as PropType<Job[]>
            }
        }
    
    })
    </script>
    
    <style scoped>
    
    </style>

CodePudding user response：

If you want to get the datas inside the loop to be in multiple places. You need to wrap the datas which should be inside the loop inside the v-for. So try like below,

<template>
        <div v-for="job in jobs" :key="job.id"> 
            <ul>
                <li></li>
                <h2>{{job.title}} in {{job.location}}</h2> //Error
            </ul>
            <div >
                <p> {{job.salary}} rupees </p> //ERROR
            </div>
        </div> 
    </template>
    
    <script lang="ts">
    import { defineComponent, PropType } from 'vue'
    import Job from '@/components/Job'
    
    export default defineComponent({
        props: {
            jobs: {
                required: true,
                type: Array as PropType<Job[]>
            }
        }
    
    })
    </script>
    
    <style scoped>
    
    </style>