Level 51
Because setup is run around the beforeCreate and created lifecycle hooks, you do not need to explicitly define them. In other words, any code that would be written inside those hooks should be written directly in the setup function.
Jan 14, 2023
2
Level 4
onCreated Hook in Compostion api Vue Js
How to use onCreated Hook in composition api in vue . Or what is the alternative on this hook in composition api
Level 4
@MohamedTammam I'm trying to access data then adding that data to the variable which I've created after that I'm updating the DOM.
<script setup>
import { reactive, computed, onBeforeMount } from "vue";
import { useRouter, useRoute } from "vue-router";
import sourceData from "@/data.json";
const router = useRouter();
const route = useRoute();
let destination = reactive("");
const destinationId = computed(function () {
return parseInt(route.params.id);
});
onBeforeMount(async () => {
const resp = await fetch(
`https://travel-dummy-api.netlify.app/${route.params.slug}`
);
console.log("Response" + resp);
destination = await resp.json();
console.log("Destination: " + destination.name);
console.log("Destination: " + destination.image);
});
</script>
<template>
<section class="destination">
<h2>{{ destination.name }}</h2>
<div class="destination-details">
<img v-bind:src="`/public/images/${destination.image}`" alt="" />
<p>
{{ destination.description }}
</p>
</div>
</section>
</template>
This is working like on first render getting the data but on second render showing data to the DOM
Please or to participate in this conversation.