réponses
236 vues
recuperer une 2eme parametre dans une methode Vue JS
Bonjour les amis, je n'arrive pas à passer un paramètre supplémentaire dans mon évenement ... alors je fais un drap & drop et j'aimerais recupérer un paramètre supplémentaire lorsque je deplace l'objet
1<ul class="list-group d-flex flex-wrap justify-content-start m-4">2 <li :id="critere.id+'_'+numeroChapitre" :ondragstart="dragstart_handler($event, numeroChapitre)" draggable="true" v-for="critere in criteres" :key="critere.id+'_'+numeroChapitre" class="list-group-item col-12">3 <label :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>4 <input class="float-end cursor-pointer form-check-input me-1" :id="'titre_'+critere.id+'_'+numeroChapitre" type="checkbox" :name="'enquete_checkbox[chapitre_'+numeroChapitre+'][]'" value="critere.id" aria-label="...">5 </li>6</ul>1<ul class="list-group d-flex flex-wrap justify-content-start m-4">2 <li :id="critere.id+'_'+numeroChapitre" :ondragstart="dragstart_handler($event, numeroChapitre)" draggable="true" v-for="critere in criteres" :key="critere.id+'_'+numeroChapitre" class="list-group-item col-12">3 <label :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>4 <input class="float-end cursor-pointer form-check-input me-1" :id="'titre_'+critere.id+'_'+numeroChapitre" type="checkbox" :name="'enquete_checkbox[chapitre_'+numeroChapitre+'][]'" value="critere.id" aria-label="...">5 </li>6</ul>
et dans ma méthode dragstart_handler je veux recuperer mon 2eme paramètre mais il ça ne fonctionne pas
1 methods: {2 dragstart_handler(event, numeroChapitre) {3 console.log(event, numeroChapitre);4 event.dataTransfer.dropEffect = 'move';5 event.dataTransfer.effectAllowed = 'move';6 event.dataTransfer.setData("idElement", event.target.id);7 event.dataTransfer.setData("chapitreId", event.target.id);89 },10}1 methods: {2 dragstart_handler(event, numeroChapitre) {3 console.log(event, numeroChapitre);4 event.dataTransfer.dropEffect = 'move';5 event.dataTransfer.effectAllowed = 'move';6 event.dataTransfer.setData("idElement", event.target.id);7 event.dataTransfer.setData("chapitreId", event.target.id);89 },10}
lorsque je tente de faire une action j'ai cette erreur en console ...
si quelqu'un a une idée de comment resoudre le problème svp, merci
Bonsoir, si t'as pas encore réussi a résoudre ton souci je pense que tu pourrais changer d'approche au lieu d'utiliser un drap & drop tu pourrais utiliser un select (v-select) as tu déjà essayé ? Puis tu utilise @update pour appeler ta fonction tout en passant l'event et le 2e paramètre
bonjour, oui je vois sauf que l'idée du drap & drop ici c'est de pouvoir réorganiser les elements facilement, et maintenant j'ai plutot réussi a contourner cette erreur de 2eme parametre sauf que la mon v-show fonctionne mais des que je passe en v-if j'ai une erreur
1<li v-for="critere in AllCriteres" v-if="!critereIsSelected(critere, index)" :key="critere.id+'_'+numeroChapitre" style="cursor: move;" :id="critere.id+'_'+numeroChapitre" :ondragstart="dragstart_handler" draggable="true" class="list-group-item col-12 p-2" :style="{'background-color': critereIsSelected(critere, index) ? 'skyblue': 'none' }">23 <label style="cursor: move;" :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>4 <input hidden="false" class=" float-end cursor-pointer form-check-input me-1" :id="'titre_'+critere.id+'_'+numeroChapitre" type="checkbox" :name="'enquete_checkbox[chapitre_'+numeroChapitre+'][]'" :value="critere.id" aria-label="...">5</li>1<li v-for="critere in AllCriteres" v-if="!critereIsSelected(critere, index)" :key="critere.id+'_'+numeroChapitre" style="cursor: move;" :id="critere.id+'_'+numeroChapitre" :ondragstart="dragstart_handler" draggable="true" class="list-group-item col-12 p-2" :style="{'background-color': critereIsSelected(critere, index) ? 'skyblue': 'none' }">23 <label style="cursor: move;" :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>4 <input hidden="false" class=" float-end cursor-pointer form-check-input me-1" :id="'titre_'+critere.id+'_'+numeroChapitre" type="checkbox" :name="'enquete_checkbox[chapitre_'+numeroChapitre+'][]'" :value="critere.id" aria-label="...">5</li>
et j'ai une erreur style
pourtant des que je met mon v-show tout passe bien sauf que le v-show le cache juste alors que le v-if le supprime vraiment du moins c'est ce que j'ai pu lire
bonjour désolé de la reponse tardive @melltrust voici ma methode critereIsSelected :
j'ai d'abord ma proprieté chapitres dans mon objet data:
1Vue.createApp({2 data() {3 return {4 chapitres: <?php echo json_encode($enquete['chapitres']); ?>,5 }6 },1Vue.createApp({2 data() {3 return {4 chapitres: <?php echo json_encode($enquete['chapitres']); ?>,5 }6 },
1critereIsSelected(critere, index) {2 if (this.critereIsInList(index, critere)) {3 console.log(critere.id);4 let idOfElement = critere.id + '_' + (parseInt(index) + 1);5 this.bgColor = 'skyblue';6 return true;7 }8 this.bgColor = 'none';9 return false;1011}1critereIsSelected(critere, index) {2 if (this.critereIsInList(index, critere)) {3 console.log(critere.id);4 let idOfElement = critere.id + '_' + (parseInt(index) + 1);5 this.bgColor = 'skyblue';6 return true;7 }8 this.bgColor = 'none';9 return false;1011}
et vu que j'utilise aussi la methode critereIsInList je te la mets aussi :
1critereIsInList(index, critere) {2 var response = false;3 if (this.chapitres.length > index) {4 let criteresOfTheChapter = this.chapitres[index].criteres;5 criteresOfTheChapter.forEach(element => {6 if (critere.id == element.id) {7 response = true;8 }9 });10 }11 return response;12 }1critereIsInList(index, critere) {2 var response = false;3 if (this.chapitres.length > index) {4 let criteresOfTheChapter = this.chapitres[index].criteres;5 criteresOfTheChapter.forEach(element => {6 if (critere.id == element.id) {7 response = true;8 }9 });10 }11 return response;12 }
salut @dani03 , dans un 1er temps met la fonction critereIsInList et critereIsSelected dans le computed et observer
12data() {3 return {45 // je met variable response dans le data pour eviter de la creer6 response : false;7 }8},910computed: {1112 // Etant donnee qu'il s'agit d'une propriete calculer,13 // autant la mettre dans computed.1415 critereIsInList(index, critere) {1617 if (this.chapitres.length > index) {1819 let criteresOfTheChapter = this.chapitres[index].criteres;2021 criteresOfTheChapter.forEach(element => {22 if (critere.id == element.id) {23 this.response = true;24 }25 });26 }2728 return this.response;29 },12data() {3 return {45 // je met variable response dans le data pour eviter de la creer6 response : false;7 }8},910computed: {1112 // Etant donnee qu'il s'agit d'une propriete calculer,13 // autant la mettre dans computed.1415 critereIsInList(index, critere) {1617 if (this.chapitres.length > index) {1819 let criteresOfTheChapter = this.chapitres[index].criteres;2021 criteresOfTheChapter.forEach(element => {22 if (critere.id == element.id) {23 this.response = true;24 }25 });26 }2728 return this.response;29 },
Il faut Se connecter ou Créer un compte pour participer à cette conversation.
