OPTIONS Response: 
Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
​
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​
data: Object { name: "Image Material List", description: "", renders: (2) […], … }
​​
actions: Object { GET: {…} }
​​​
GET: Object { archive_number: {…}, annotation: {…}, creation_date: {…}, … }
​​​​
annotation: Object { type: "string", required: false, read_only: false, … }
​​​​​
label: "Аннотация"
​​​​​
read_only: false
​​​​​
required: false
​​​​​
type: "string" ЭТО МЕТАДАННЫЕ МОЕГО OPTIONS ЗАПРОСА. КАК СДЕЛАТЬ ТАК ЧТОБЫ В ЭТОМ КОДЕ <script setup>
import { ref, watch } from 'vue';
import { getOptions } from "@/api/default_api_promises"; // Правильный импорт функции для запроса

// Свойства компонента
const props = defineProps({
  items: Array,
  materialType: String
});

const loading = ref(false);
const fields = ref([]); // Сохранение полученных полей от OPTIONS запроса

// Словарь иконок для различных типов материалов
const iconMap = {
  audio: 'mdi-volume-high',
  image: 'mdi-image-outline',
  video: 'mdi-video-outline'
};

// Функция для получения полей для отображения
const getDisplayFields = (item) => {
  if (!fields.value.length) return []; // Проверяем, есть ли поля

  return Object.entries(fields.value).map(([key, field]) => ({
    name: field.label, // Используем русские названия из метаданных
    value: item[key] !== undefined ? item[key] : 'N/A', // Получаем значение из item, если оно существует
    label: field.label // Отображаем лейбл
  }));
};

const fetchOptions = () => {
  loading.value = true;

  // Отправляем OPTIONS запрос для текущего типа материала
  getOptions({
    url: `/api/${props.materialType}-materials/`
  })({ params: {} })
    .then(response => {
      console.log('OPTIONS Response:', response); // Выводим весь ответ в консоль
      fields.value = response.data.actions.GET || []; // Получаем поля из метаданных
    })
    .catch(error => {
      console.error('Error fetching options:', error);
    })
    .finally(() => {
      loading.value = false;
    });
};

// Watcher, следящий за изменением типа материала и вызывающий OPTIONS запрос
watch(() => props.materialType, () => {
  if (props.materialType) {
    fetchOptions();
  }
});
</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item">
          <div class="item-icon">
            <v-icon size="110" color="primary-violet">
              {{ iconMap[materialType] || 'mdi-file-document-outline' }}
            </v-icon>
          </div>
          <div class="item-content">
            <!-- Показ индикатора загрузки -->
            <v-progress-circular
              v-if="loading"
              indeterminate
              color="primary"
            ></v-progress-circular>
            <template v-else>
              <!-- Отображаем поля, полученные через OPTIONS запрос -->
              <div v-for="field in getDisplayFields(item)" :key="field.name" class="item-field">
                <span class="field-label">{{ field.label }}:</span>
                <span class="field-value">{{ field.value }}</span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator>
</template>

<style scoped>
.item {
  width: 900px;
  padding: 15px;
  margin: 15px auto;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  background-color: white;
}

.item-icon {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-content {
  flex-grow: 1;
  margin-left: 20px;
  overflow: hidden;
}

.item-field {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.field-label {
  flex: 0 0 200px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  padding-right: 15px;
  text-transform: capitalize;
}

.field-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  white-space: pre-wrap;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style>
                В <span class="field-label">{{ field.label }}:</span> ВМЕСТО field-label БЫЛ РЕАЛЬНЫЙ LABEL ИЗ МЕТАЛАННЫХ OPTIONS ЗАПРОСА СОДЕРЖАЩИЙ АННОТАЦИЯ И ТД, А ТО СЕЙЧАС У МЕНЯ НИЧЕГО НЕ ОТОБРАЖАЕТСЯ