Evènement dynamique

Bonjour,

Je commence tout juste le vuejs et j’ai besoin de votre aide…

Je travail avec vuejs et kendo.

Je voudrais pouvoir rajouter des évènements vueJs dynamiquement.

Je m’explique :
Je crée un menu avec le retour d’une api et celle si me retourne les différentes fonctions a appelé
donc je crée ma chaine dans une variable puis ensuite je la met dans ma variable vuejs qui est relié avec un v-html d’un <li>

Mais rien a faire je n’arrive pas a connecté mon v-on:onclick. il me l’affiche comme du html normal et non comme tout les autres en eventListener

Cela est faisable?
Si oui qlqun a une idée ?

Cordialement,
Quillian Chardon

Salut,

Montrer un bout de code aurait été beaucoup plus simple à comprendre qu’un gros pavé de texte. Tu aurais sans doute eu une réponse plus rapidement.

Si je comprends bien, ton code ressemble à ça <li v-html="myVar">
avec myVar = '<div v-on:onclick="myFunction" />'

Problèmes :

  1. c’est v-on:click et non v-on:onclick
  2. je ne pense pas que ça marche même en corrigeant ça, parce que v-html va juste aller appeler innerHTML = ... et ne cherche pas à interpoler une variable avec de la syntaxe vue

Pourquoi utiliser une variable qui contient de l’HTML ?
J’ai l’impression que tu essais de résoudre un problème, dont la solution en vuejs est : les slots

Bonjour,
Oui effectivement tu as parfaitement résumé mon problème !
Je viens d’essayer la première méthode : v-on:click

Je n’arrive pas bien a comprendre le roles des slots.
Car si j’ai bien compris c’est des complements de composant ?

En effet mon menu est sous cette forme : Tableau - Pastebin.com
un items de menu : → [“nom”,“icon”,“niveau”,“function a appeler au click”]

Ma variable que j’affecte a mon menu contiens le menu en fonction de la langue donc elle est amené a changer.

Je ne pense pas pouvoir utiliser un composant car je fais tout mon traitement a la main.

J’ai trouvé une solution pour dépanner en attendant : this.$nextTick(function () { let ThisTempo = this; document.getElementById - Pastebin.com
cela me permet de faire un évènement au click mais cela doit être déclaré a la main et non avec une seule propriété.
Il faut maintenant que je trouve comment je peux optimiser cela et l’automatiser.

Merci beaucoup de ton aide.
Cordialement,
Quillian

et pk pas qqch comme ça au lieu d’HTML dans une variable ?

<li v-for="item in items" @click="call(item[3])">
  <span :class="item[1]" />
  {{ item[0] }}
</li>

avec items étant la liste des éléments accompagnant "en" ou "fr"
(ex d’ item : ["R&D", "fas fa-flask", 0, ""])

edit: avec

methods: {
  call(name) {
     this[name] && this[name]()
  }
}

Merci beaucoup de ta réponse effectivement ça serait bien plus propre que mon truc …
image

Il y a un système de niveau (le numéro en 3eme position d’un élément en l’occurrence 0)
Je ne pense pas pouvoir le faire avec des les boucles vue. Après je ne connais pas toute la puissance vue que je débute

Si tu veux voir le bout de code qui me permet de générer mon menu en fonction de la langue actuellement.

Cordialement,
Quillian

Oula oui, ce code n’est vraiment pas dans la philosophie de vue. C’es très impératif (boucle for/while, construction pas à pas, …) alors que vue est très déclaratif

C’est toi qui contrôle le gros json de description du menu ?
Car en le retravaillant un peu, on peut simplifier et rendre plus explicite le tout

ex :

<template>
  <li v-for="item in displayedItems" @click="call(item.action)">
    <span v-if="item.iconClasses" :class="item.iconClasses" />
    {{ item.title }}
  </li>
</template>

<script>
export default {
  data: () => ({
    lang: 'fr',
    menu: {
      fr: [
        { title: "R&D", iconClasses: "fas fa-flask", level: 0, action: null },
        ...
      ],
      en: [
        ...
      ]
    }
  }),
  computed: {
    displayedItems () {
       return this.menu[this.lang]
    )
  },
  methods: {
    call(name) {
       name && this[name] && this[name]()
    }
  }
}
</script>

et faire un <select v-model="lang"> pour changer la langue