Vue 3 for loop issue

Question

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 class="salary">
                <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>

Answer 1

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 class="salary">
                <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>