fix: to composition api

This commit is contained in:
Mohamed Maoulainine Maoulainine 2025-02-26 03:39:59 +01:00
parent 0733f8d5af
commit f48b570494
4 changed files with 40 additions and 61 deletions

View File

@ -31,11 +31,7 @@ const router = useRouter();
const goToLink = () => { const goToLink = () => {
if (props.projectLink) { if (props.projectLink) {
router.push(props.projectLink); router.push(props.projectLink);
/* }
window.location.href = props.projectLink;
*/
}
}; };
</script> </script>

View File

@ -9,46 +9,36 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, defineProps, onMounted } from "vue";
import axios from "axios"; import axios from "axios";
export default { const props = defineProps<{
props: { title: string;
title: String, description: string;
description: String, }>();
},
setup(props) { const expanded = ref(false);
const expanded = ref(false); const currentDescription = ref(props.description);
const currentDescription = ref(props.description);
const fetchData = async () => { const fetchData = async () => {
try { try {
const response = await axios.get("http://localhost:5000/data"); // to edit later! const response = await axios.get("http://localhost:5000/data"); // Update the URL if needed
currentDescription.value = response.data[0].canva_data; currentDescription.value = response.data[0].canva_data;
} catch (error) {
} catch (error) { console.error("Erreur lors de la récupération des données :", error);
console.error("Erreur lors de la récupération des données :", error);
}
};
const toggleExpand = async () => {
if (!expanded.value) {
await fetchData();
} else {
currentDescription.value = props.description;
}
expanded.value = !expanded.value;
};
return {
expanded,
currentDescription,
toggleExpand
};
} }
}; };
const toggleExpand = async () => {
if (!expanded.value) {
await fetchData();
} else {
currentDescription.value = props.description;
}
expanded.value = !expanded.value;
};
</script> </script>

View File

@ -10,7 +10,9 @@
{{ email }} {{ email }}
</button> </button>
</div> </div>
<button class="return-button"><a href="/">Return to list project</a></button> <button class="return-button">
<RouterLink to="/">Return to list project</RouterLink>
</button>
</div> </div>
</div> </div>
</header> </header>

View File

@ -10,30 +10,21 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import CanvasItem from "@/components/canvas/CanvasItem.vue"; import CanvasItem from "@/components/canvas/CanvasItem.vue";
export default { const items = ref([
components: { { title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
CanvasItem { title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
}, { title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
setup() { { title: "4. Solution", description: "Les solutions proposées", class: "Solution" },
const items = ref([ { title: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
{ title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" }, { title: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
{ title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" }, { title: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
{ title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" }, { title: "8. Coûts", description: "Les coûts associés", class: "Couts" },
{ title: "4. Solution", description: "Les solutions proposées", class: "Solution" }, { title: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
{ title: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" }, ]);
{ title: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
{ title: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
{ title: "8. Coûts", description: "Les coûts associés", class: "Couts" },
{ title: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
]);
return { items };
}
};
</script> </script>
<style scoped> <style scoped>