Vue.js 3列表组件无法渲染对象属性问题求助

问题出在FilmComp.vue的props接收方式上：<script setup>中defineProps返回的是一个包含所有props的响应式对象，你将这个对象直接命名为film，导致模板里的film指向的是props集合对象，而非传入的影片数据对象，因此无法读取title、genre等属性。

解决方法（二选一即可） #

方法1：解构赋值获取目标props

直接从defineProps返回的对象中解构出film属性，这样模板里的film就是传入的影片数据对象：

<template>
  <div
    class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md"
  >
    <div
      class="relative mx-4 mt-4 h-80 overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg"
    >
      <img :src="film.imgSrc" alt="profile-picture" />
    </div>
    <div class="p-6 text-center">
      <h4
        class="mb-2 block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased"
      >
        {{ film.title }}
      </h4>
      <p
        class="block bg-gradient-to-tr from-pink-600 to-pink-400 bg-clip-text font-sans text-base font-medium leading-relaxed text-transparent antialiased"
      >
        {{ film.genre }}
      </p>
    </div>
    <div class="flex justify-center gap-7 p-6 pt-2">
      {{ film.year }}
    </div>
  </div>
</template>

<script setup>
const { film } = defineProps({
  film: {
    type: Object,
    required: true
  }
})
</script>

方法2：重命名props接收变量

将defineProps返回的对象命名为props，模板中通过props.film访问影片数据：

<template>
  <div
    class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md"
  >
    <div
      class="relative mx-4 mt-4 h-80 overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg"
    >
      <img :src="props.film.imgSrc" alt="profile-picture" />
    </div>
    <div class="p-6 text-center">
      <h4
        class="mb-2 block font-sans text-2xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased"
      >
        {{ props.film.title }}
      </h4>
      <p
        class="block bg-gradient-to-tr from-pink-600 to-pink-400 bg-clip-text font-sans text-base font-medium leading-relaxed text-transparent antialiased"
      >
        {{ props.film.genre }}
      </p>
    </div>
    <div class="flex justify-center gap-7 p-6 pt-2">
      {{ props.film.year }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  film: {
    type: Object,
    required: true
  }
})
</script>

修改后，FilmComp就能正常读取传入的影片对象属性，实现数据绑定。

内容的提问来源于stack exchange，提问作者Ruben Pari