How to return data from fetch to use in template in Vue

Question

If I have a function that looks like this:

const loadDescription = async (id: string) => {
    var data = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/l/${id}`).then(res => res.json()).then((repos) => {
        // console.log(repos);
        return repos.description;
    });
    console.log(data)
    return data;
}

And this correctly prints the data I want, how can I return the data and use it in my template?

I tried like this:

<p>{{  loadDescription(launch._id).then((data) => {
    data
    })
}}</p>

And also this:

<p>{{  loadDescription(launch._id)}}</p>

But this just shows "[object Promise]" in the Vue template.

What am I doing wrong?

See stackoverflow.com/questions/14220321/… . You can't call it in a template, and this would be harmful because a function is called on each view update. Call it in setup — Estus Flask
– Estus Flask, Commented Sep 3, 2022 at 13:01

S.Visser · Accepted Answer · 2022-09-03 13:05:23Z

2

Templates in vue are data driven, they receive the data from props defined in the <script> part.

So you should use either an computed or data prop.

Pseudo code:

<template>
  <div v-if="description">{{ description }}</div>
  <div v-else>Loading...</div>
</template>

<script>
export default {
  data() {
    return {
      description: null
    }
  },
  mounted() {
    this.description = this.loadDesciption(1)
  },
  methods: {
    async loadDescription(id) {
       const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/l/${id}`)
       const description = await res.json()
       return description
    } 
  }
}
</script>

answered Sep 3, 2022 at 13:05

S.Visser

4,7751 gold badge25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mastercooler6 Over a year ago

That helps, but I am trying to do this in a loop so I guess I need to figure out some other way

subz Over a year ago

this.loadDescription() will return a promise. How do you handle that. I have seen in other examples that the global variable is set within the method itself instead of returning which worked for me.

Collectives™ on Stack Overflow

How to return data from fetch to use in template in Vue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related