"La méthode de masquage de Bootsrap-Vue Modal n'est pas valide"
P粉428986744
2023-08-25 17:59:43
<p>J'ai un simple <code>bootstrap-vue modal</code> qui contient un <code>texte d'entrée</code>. Je souhaite que le bouton <code>Ok</code> ne se ferme pas automatiquement lorsque j'appuie dessus, j'utilise donc "empêcher". Ensuite, je fais une validation et je souhaite ensuite le fermer en utilisant la méthode "hide". Mais ça ne marche pas pour moi. Ce qui est étrange, c'est que la méthode show fonctionne parfaitement. J'ai vérifié la documentation et je ne trouve pas où se trouve l'erreur. Comment puis-je faire en sorte que la méthode hide fonctionne pour moi à ce stade ?
Voici mon code. </p>
<pre class="brush:js;toolbar:false;"><template>
<div>
<bouton b
taille = "sm"
classe = "m-2"
variante = "primaire"
@click="grfGuardarBtnPredefAccions()"
>Garder le graphique personnalisé</bouton b
>
<b-modal
id="grfModalGuardar"
ref="grfGuardarModal"
title="Insérer le nombre"
@ok.prevent="grfModalOk"
@cancel="grfModalCancel"
>
<p>
Vous devez attribuer un numéro au graphique personnalisé que vous souhaitez garder.
</p>
<entrée-formulaire-b
v-model="grfModalPersoName"
placeholder="Écrire ici ..."
></b-form-input>
</b-modal>
</div>
</modèle>
<script>
exporter par défaut {
nom : "GrafTopMenu",
Composants: {
GrafEditeur,
},
données() {
retour {
// stocke le nom que l'utilisateur donne au graphique personnalisé qui va être enregistré.
grfModalPersoName : "",
} ;
},
calculé : {},
méthodes : {
/**actions effectuées par le bouton Enregistrer le graphique personnalisé*/
grfSaveBtnPredefActions() {
laissez errormsg = ""
si (this.grfTableGrafica.tableConf.items.length == 0) {
errormsg += errormsg + "Impossible d'enregistrer un graphique vide";
}
si (! message d'erreur) {
this.$refs.grfSaveModal.show();
} autre {
generalUtils.makeToast(
"danger",
3000,
"Vous ne pouvez pas enregistrer un graphique vide."
);
}
},
grfModalOk() {
si (!this.grfModalPersoName.trim()) {
generalUtils.makeToast(
"danger",
3000,
"Le nom ne peut pas être vide."
);
} autre {
console.log("ok");
console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
console.log("this.grfTableGrafica", this.grfTableGrafica);
this.$refs["grfSaveModal"].hide();
// this.$refs.grfSaveModal.hide();
}
},
grfModalAnnuler() {
this.grfModalPersoName = "";
},
},
} ;
</script>
<style>
</style>
≪/pré>
<p>我尝试的语法：</p>
<pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide();
this.$refs['grfSaveModal'].hide();
this.$bvModal.hide('grfSaveModal');
≪/pré>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Edit : Avez-vous utilisé v-model ? Transmettez les données au v-model et mettez-les à jour si nécessaire
Vous avez une autre option.
<b-modal id="bv-modal-example" hide-footer></b-modal> //在script标签中 this.$bvModal.hide('bv-modal-example')Ou vous pouvez utiliser l'attribut v-model pour contrôler la boîte modale Bootstrap Vue.
Veuillez consulter la Documentation.
Le problème est que vous essayez de le fermer au même moment tout en l'empêchant de se fermer.
Vous pouvez résoudre ce problème en reportant la méthode cachée au moment suivant en utilisant
this.$nextTick.this.$nextTick(() => { this.$bvModal.hide('grfGuardarModal') })