Sobes.tech
Назад к вопросам
Middle
6

Вызовите функцию getProducts в компоненте Vue 3 и отрисуйте полученные результаты в шаблоне.

Компании, где спрашивали
АО Пари Страховая компания

Ответ от нейросети

sobes.tech AI

В Vue 3 для вызова асинхронной функции getProducts и отображения результатов можно использовать Composition API с setup и реактивным состоянием. Пример:

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const products = ref([])

async function getProducts() {
  // Здесь должен быть реальный вызов API
  return [
    { id: 1, name: 'Товар 1', price: 100 },
    { id: 2, name: 'Товар 2', price: 200 }
  ]
}

onMounted(async () => {
  products.value = await getProducts()
})
</script>

В этом примере при монтировании компонента вызывается getProducts, результат сохраняется в реактивную переменную products, и данные отображаются в списке.