Vue3中v-for遍历props传入的jobs数组提示job属性不存在如何解决

v-for 声明的循环变量存在作用域限制，仅在绑定v-for指令的元素及其子元素内可访问。你的代码中v-for绑定在提前闭合的<li>标签上，循环变量job的作用域被限制在这个空li内部，后续的<h2>、薪资区块<p>都在li标签之外，无法读取到job变量，因此TS抛出属性不存在的Vetur(2551)报错。

将所有需要使用job变量的渲染内容全部移动到绑定v-for的li标签内部，确保变量在有效作用域内被调用。

• 额外注意：原代码从@/components/Job导入的是Vue组件文件，不能直接作为TS类型使用。如果要给jobs传参做类型约束，需要单独定义Job数据结构的TS接口/类型，使用import type语法导入对应类型，避免额外的类型校验报错。

修复后的完整可运行代码：

<template>
  <div> 
    <ul>
      <li v-for="job in jobs" :key="job.id">
        <h2>{{ job.title }} in {{ job.location }}</h2>
        <div class="salary">
          <p>{{ job.salary }} rupees</p>
        </div>
      </li>
    </ul>
  </div> 
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
// 替换为你实际存放Job类型定义的文件路径
import type Job from '@/types/job'

export default defineComponent({
  props: {
    jobs: {
      required: true,
      type: Array as PropType<Job[]>
    }
  }
})
</script>

<style scoped>
</style>

内容的提问来源于stack exchange，提问作者Vimal Vinayraj