audi/app/components/block/modelList.vue

<template>
  <div class="etron--card">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="thumb">
          <img :src="item.imagePath" :alt="item.imageAlt" />
        </div>
        <div class="desc--wrap">
          <h2>{{ item.title }}</h2>
          <h3>{{ item.description }}</h3>
          <NuxtLink
            v-if="item.linkUrl"
            class="more--detail--href mt--20 ft--16"
            :to="item.linkUrl"
            :target="item.linkTarget || '_self'"
          >
            {{ item.linkText || "더 알아보기" }} <i class="ico"></i>
          </NuxtLink>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    items: {
      type: Array,
      required: true,
      default: () => [],
      validator: (value) => {
        return value.every(
          (item) => item.hasOwnProperty("title") && item.hasOwnProperty("description")
        );
      },
    },
  });
</script>