I am facing an issue while attempting to loop through the data from the App.vue component by passing props to a child component. When I try to display the contents, I encounter an error in the v-for loop. Upon reviewing the code and error message, it seems like there is a problem with how I accessed the 'job' property. The error message states: "Property 'job' does not exist on type '...'. Did you mean 'jobs'?" As a beginner, I'm unsure of how to resolve this issue. Any suggestions?
<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>