audi/app/components/block/CareProgramItem.vue

<template>
  <div class="row--block--wrapper">
    <div>
      <ul :class="align">
        <li v-for="(item, index) in items" :key="index">
          <div class="thumb">
            <img :src="item.imagePath" :alt="item.title" />
          </div>
          <div class="desc--wrap">
            <h2 class="title">{{ item.title }}</h2>
            <div class="captions" v-html="item.description"></div>
            <NuxtLink
              v-if="item.linkUrl"
              class="more--detail--href mt--20 ft--16"
              :to="item.linkUrl"
              :target="item.linkTarget || '_blank'"
            >
              {{ item.linkText }}<i class="ico"></i>
            </NuxtLink>
            <div class="small--text" v-if="item.smallText">{{ item.smallText }}</div>
            <div class="captions--text" v-if="item.captionText">
              {{ item.captionText }}
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  defineProps({
    align: {
      type: String,
      default: "",
    },
    items: {
      type: Array,
      required: true,
      default: () => [],
      validator: (items) => {
        return items.every(
          (item) =>
            item.imagePath &&
            item.title &&
            item.description &&
            typeof item.imagePath === "string" &&
            typeof item.title === "string" &&
            typeof item.description === "string"
        );
      },
    },
  });
</script>