"Bootsrap-Vue Modal的hide方法無效"
P粉428986744
2023-08-25 17:59:43
<p>我有一個簡單的<code>bootstrap-vue modal</code>，其中包含一個<code>input text</code>。我希望按下<code>Ok</code>按鈕時不會自動關閉，所以我使用了"prevent"。然後我進行一些驗證，然後希望使用"hide"方法關閉它。但是對我來說不起作用。奇怪的是show方法完全正常工作。我查看了文檔，找不到錯誤所在。如何使hide方法在那一點上對我起作用？
這是我的程式碼。 </p>
<pre class="brush:js;toolbar:false;"><template>
<div>
<b-button
size="sm"
class="m-2"
variant="primary"
@click="grfGuardarBtnPredefAccions()"
>Guardar gráfica personalizada</b-button
>
<b-modal
id="grfModalGuardar"
ref="grfGuardarModal"
title="Insertar nombre"
@ok.prevent="grfModalOk"
@cancel="grfModalCancel"
>
<p>
Debe asignar un nombre a la gráfica personalizada que desea guardar.
</p>
<b-form-input
v-model="grfModalPersoName"
placeholder="Escriba aquí ..."
></b-form-input>
</b-modal>
</div>
</範本>
<腳本>
導出預設值{
名稱：“GrafTopMenu”，
成分： {
格拉夫編輯，
},
數據（） {
返回 {
// 儲存使用者為要儲存的自訂圖表指定的名稱。
grfModalPersonName: "",
};
},
計算：{}，
方法： {
/**透過儲存自訂圖表按鈕執行的操作*/
grfSaveBtnPredefActions() {
讓 errormsg = "";
if (this.grfTableGrafica.tableConf.items.length == 0) {
errormsg = errormsg “無法儲存空白圖表”;
}
如果（！錯誤訊息）{
this.$refs.grfSaveModal.show();
} 別的 {
GeneralUtils.makeToast(
“危險”，
3000,
“您無法保存空白圖表。”
）；
}
},
grfModalOk() {
if (!this.grfModalPersoName.trim()) {
GeneralUtils.makeToast(
“危險”，
3000,
“名稱不能為空。”
）；
} 別的 {
console.log(“確定”);
console.log(“this.grfModalPersoName :>>”, this.grfModalPersoName);
console.log("this.grfTableGrafica", this.grfTableGrafica);
this.$refs[“grfSaveModal”].hide();
// this.$refs.grfSaveModal.hide();
}
},
grfModalCancel() {
this.grfModalPersoName = “”;
},
},
};
</腳本>
<風格>
</風格>
</前>
<p>我嘗試的文法：</p>
<pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide();
this.$refs['grfSaveModal'].hide();
this.$bvModal.hide('grfSaveModal');
</前>
編輯：你使用v-model了嗎？將資料傳遞給v-model，並在需要時更新它
你還有另一個選擇。
<b-modal id="bv-modal-example" hide-footer></b-modal> //在script标签中 this.$bvModal.hide('bv-modal-example')或是你可以使用v-model屬性來控制Bootstrap Vue模態框。
請查看文件。
問題在於您試圖在同一時刻關閉它，同時又阻止它關閉。
您可以透過使用
this.$nextTick將隱藏方法延遲到下一個時刻來解決這個問題。this.$nextTick(() => { this.$bvModal.hide('grfGuardarModal') })