CODEWITHSUNDEEP
vue.jsvuejs3
ljik
ljik

Reputation: 41

How to make api call within created hook in vue 3?

Came back to vue after long break. In my solution im using composition api where I need to fetch some data once the component is created so I can display it later on. In my current solution, template is kinda rendered before the call has been made. Probably stupid mistake but still I cannot figure it out (in vue 2.0 it was clear - created() hook).

<template>
  <div>
      <div class="row mb-2 border-top border-bottom" v-for="pizza in pizzas" :key="pizza">
        <div class="col-sm-2">
          <img alt="Vue logo" src="../assets/logo.png" style="height: 100px; width: 135px;">
        </div>
        <div class="col-sm-2 mt-4">
          {{pizza.name}}
        </div>
        <div class="col-md offset-md-2 mt-4">
          price
        </div>
        <div class="col-sm-2 mt-4">
          <button class="btn btn-primary" type="submit">Add</button>
        </div>
      </div>
  </div>
</template>

<script setup>
import {api} from "@/api.js"

let pizzas = null

const GetPizzas = async ()=>{
    await api.get('pizza/pizzas/')
    .then(response=>{
        pizzas = response.data
    })
}
GetPizzas()
</script>

Upvotes: 3

Views: 8387

Answers (2)

tao
tao

Reputation: 90068

The list of available hooks in Composition API is here:

The closest thing to Options API's created is running the code in setup() function. However, to avoid having to guard the template with v-if="pizzas", you should instantiate it as an empty array.

And, obviously, you want it to be reactive, so it's ref([]), not just [].

<script setup>

import { ref } from 'vue'
import { api } from '@/api.js'

const pizzas = ref([])

const GetPizzas = async () => {
  await api.get('pizza/pizzas/').then((response) => {
    pizzas.value = response.data
  })
}
GetPizzas()

</script>

Notes:

  • <template> can remain the same, since we initialise pizzas as empty array. If you initiate it as anything falsey, you need a v-if="pizzas" guard on the root wrapper element.
  • refs require assignment to their .value

Upvotes: 5

ahcl
ahcl

Reputation: 32

Your solution should work as what you want. Your api called at the moment component was created, not after component rendered cause it's not called in the onMounted hooks. Moreover, you should make pizzas reactive.

Upvotes: 0

Related Questions