Vue.js商品目录组件报错：Promo未定义问题求助

问题出在<script setup>语法的props使用方式上：defineProps定义的属性不会自动暴露为顶级变量，必须通过其返回的对象访问。

修复方案 #

修改PromotionalSpot.vue的<script setup>部分，将defineProps的返回值赋值给变量，通过该变量访问promo属性。有两种写法可选：

写法1：保留props对象

<template>
    <div :class="spotClasses" class="relative">
      <a :href="props.promo?.link" v-if="props.promo?.link">
        <img :src="props.promo?.image?.imageUrl" :alt="props.promo?.image?.alt || 'Promotional Image'" class="w-full h-full object-cover" />
      </a>
      <p v-else>No promotional image available</p>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  promo: {
    type: Object,
    required: true,
  },
});

console.log(props.promo);

const spotClasses = computed(() => {
  const type = props.promo?.type;  

  console.log(type);  

  if (type === '2x2') return 'col-span-2 row-span-2';
  if (type === '2x1') return 'col-span-2';
  if (type === '1x1') return '';
  return ''; 
});
</script>

写法2：解构props（更简洁）

<template>
    <div :class="spotClasses" class="relative">
      <a :href="promo?.link" v-if="promo?.link">
        <img :src="promo?.image?.imageUrl" :alt="promo?.image?.alt || 'Promotional Image'" class="w-full h-full object-cover" />
      </a>
      <p v-else>No promotional image available</p>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const { promo } = defineProps({
  promo: {
    type: Object,
    required: true,
  },
});

console.log(promo);

const spotClasses = computed(() => {
  const type = promo?.type;  

  console.log(type);  

  if (type === '2x2') return 'col-span-2 row-span-2';
  if (type === '2x1') return 'col-span-2';
  if (type === '1x1') return '';
  return ''; 
});
</script>

原理说明 #

在Vue 3的<script setup>语法中，defineProps会返回一个包含所有传入props的响应式对象，必须通过该对象（或解构后的变量）访问属性，直接写属性名会因变量未定义报错。

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