Comment gérer les objets class avec Vue?

Bonjour,

Je précise que je suis débutant,
j’ai une problématique pour créer une activité de “relier les points” avec Vue. Mon objectif est de créer une carte de france avec des puces et une liste des régions avec des puces (ce que j’ai fait avec un SVG dans lequel j’insère un v-for pour pouvoir “créer” mes lignes (jusque là tout va bien)

ensuite, l’idée est d’écouter le click sur les puces et de récupérer les coordonnées (x,y) de la puce 1 puis de la puce 2, comparer l’id de la puce 1 et de la puce 2 pour définir la couleur du stroke, puis “d’injecter” une nouvelle ligne dans mon data : lines{}

ce que j’ai fait comme ça (mais bien sûr ça ne marche pas) :
<script> export default { name: "France-game", data: () => { return { score: 0, lines: {}, id1: "", id2: "", x1: 0, y1: 0, x2: 0, y2: 0, stroke:"" } }, mounted: function() { class Line { constructor(x1, y1, x2, y2, stroke) { this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2= y2; this.stroke = stroke; } } let id1 = ""; let id2 = ""; let x1 = 0; let y1 = 0; let x2 = 0; let y2 = 0; let stroke = "red"; let entrees = document.querySelectorAll('#entree circle'); let sorties = document.querySelectorAll('#sortie circle'); entrees.forEach(function (entree) { entree.addEventListener('click', function() { id1 = this.id.replace('entree-','') x1 = this.cx.baseVal.value y1 = this.cy.baseVal.value console.log(id1, x1, y1) // affiche les bonnes valeurs this.addValues1(id1, x1, y1) }) }) sorties.forEach(function (sortie) { sortie.addEventListener('click', function() { id2 = this.id.replace('sortie-','') x2 = this.cx.baseVal.value y2 = this.cx.baseVal.value console.log(id2, x2, y2) // affiche les bonnes valeurs this.addValues2(id2, x2, y2) this.addLine(); }) }) }, methods: { addValues1(id, x, y) { return this.id1 = id, this.x1 = x, this.y1 = y }, addValues2(id, x, y) { return this.id2 = id, this.x2 = x, this.y2 = y }, addLine() { if(this.id1 === this.id2) { this.stroke = "green" } else { this.stroke = "red" } this.lines = new Line(${this.x1}, ${this.y1}, ${this.x2}, ${this.y2}, ${this.stroke}); return; } } } </script>

Quelqu’un aurait une idée pour me sortir de ça SVP ?

D’avance merci pour vos retours :slight_smile:

J’ai refactorisé un peu mon code, et je parviens à définir mes valeurs dans le local Storage de façon dynamique, le local Storage se met à jour à chaque click sur une puce (ce que je devrait limiter à un click par la suite), quel type de fonction me permettrait, en récupérant ces valeurs, de définir une nouvelle ligne dans mon objet lines qui est dans le data SVP ?