[Vuejs]-Print out returned data from API using VueJS 3

by

0👍

✅

If you want your UI updated with API data, you need to use ref.

Once ref is updated the UI will re-render, unlike regular variables it will not update the UI when it changed.

<template>
  <div>
    <h1 align="center">Test</h1>
    <p>Received response from the API : {{ coreResp }}</p>
  </div>
</template>

<script setup>
import {login} from "@/services/core-api";
import {useAuth0} from "@auth0/auth0-vue";
import { ref } from 'vue';

const coreResp = ref('Loading data ....');

const get = async () => {
  const {getAccessTokenSilently} = useAuth0();
  const accessToken = await getAccessTokenSilently();
  coreResp.value = await login(accessToken)
};

get();
</script>

0👍

Store the value in a ref to make it reactive.

import { ref } from 'vue';
let coreResp = ref('');
// ...
coreResp.value = await login(accessToken);

Leave a comment