Sobes.tech
Back to questions
Middle
5

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

Companies where asked
АО Пари Страховая компания

Answer from AI

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, и данные отображаются в списке.