feat: switching to composition API standard

This commit is contained in:
2025-02-11 19:55:28 +01:00
parent 6a3d4239ab
commit 09e4b3262f
3 changed files with 59 additions and 64 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="LeanCanvas">
<div class="canvas">
<CanvasItem
v-for="(item, index) in items"
:key="index"
@ -11,60 +11,34 @@
</template>
<script>
import CanvasItem from "./CanvasItem.vue";
import { ref } from "vue";
import CanvasItem from "@/components/canvas/CanvasItem.vue";
export default {
components: {
CanvasItem
},
data() {
return {
items: [
{ title: "1. Problème",
description: "3 problèmes essentiels à résoudre pour le client",
class: "Probleme"
},
{ title: "2. Segments",
description: "Les segments de clientèle visés",
class: "Segments"
},
{ title: "3. Valeur",
description: "La proposition de valeur",
class: "Valeur"
},
{ title: "4. Solution",
description: "Les solutions proposées",
class: "Solution"
},
{ 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"
}
]
};
setup() {
const items = ref([
{ title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
{ title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
{ title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
{ title: "4. Solution", description: "Les solutions proposées", class: "Solution" },
{ 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>
<style scoped>
.LeanCanvas {
.canvas {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);