dani03
dani03 561 XP
a posé

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

<ul class="list-group d-flex flex-wrap justify-content-start m-4">
<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">
<label :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>
<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="...">
</li>
</ul>

et dans ma méthode dragstart_handler je veux recuperer mon 2eme paramètre mais il ça ne fonctionne pas

methods: {
dragstart_handler(event, numeroChapitre) {
console.log(event, numeroChapitre);
event.dataTransfer.dropEffect = 'move';
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData("idElement", event.target.id);
event.dataTransfer.setData("chapitreId", event.target.id);
 
},
}

lorsque je tente de faire une action j'ai cette erreur en console ... Capture d’écran 2022-12-17 à 23.30.09.png si quelqu'un a une idée de comment resoudre le problème svp, merci

stephen2304
a répondu

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

dani03
dani03 561 XP
a répondu

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

<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' }">
 
<label style="cursor: move;" :for="'titre_'+critere.id+'_'+numeroChapitre"> {{ critere.critere }} </label>
<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="...">
</li>

et j'ai une erreur style Capture d’écran 2022-12-21 à 14.23.13.png 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

melltrust
a répondu

salut @dani03 on peut voir la methode critereIsSelected(critere, index) ?

dani03
dani03 561 XP
a répondu

bonjour désolé de la reponse tardive @melltrust voici ma methode critereIsSelected :

j'ai d'abord ma proprieté chapitres dans mon objet data:

Vue.createApp({
data() {
return {
chapitres: <?php echo json_encode($enquete['chapitres']); ?>,
}
},
critereIsSelected(critere, index) {
if (this.critereIsInList(index, critere)) {
console.log(critere.id);
let idOfElement = critere.id + '_' + (parseInt(index) + 1);
this.bgColor = 'skyblue';
return true;
}
this.bgColor = 'none';
return false;
 
}

et vu que j'utilise aussi la methode critereIsInList je te la mets aussi :

critereIsInList(index, critere) {
var response = false;
if (this.chapitres.length > index) {
let criteresOfTheChapter = this.chapitres[index].criteres;
criteresOfTheChapter.forEach(element => {
response = true;
}
});
}
return response;
}
melltrust
a répondu

salut @dani03 , dans un 1er temps met la fonction critereIsInList et critereIsSelected dans le computed et observer

 
data() {
return {
 
// je met variable response dans le data pour eviter de la creer
response : false;
}
},
 
computed: {
 
// Etant donnee qu'il s'agit d'une propriete calculer,
// autant la mettre dans computed.
 
critereIsInList(index, critere) {
 
if (this.chapitres.length > index) {
 
let criteresOfTheChapter = this.chapitres[index].criteres;
 
criteresOfTheChapter.forEach(element => {
this.response = true;
}
});
}
 
return this.response;
},
dani03
dani03 561 XP
a répondu

j'ai essayé mais j'ai des erreurs Capture d’écran 2022-12-28 à 09.42.47.png

Il faut Se connecter ou Créer un compte pour participer à cette conversation.