「Bootsrap-Vue Modal の非表示メソッドが無効です」
P粉428986744
2023-08-25 17:59:43
<p><code>入力テキスト</code>を含む単純な<code>bootstrap-vueモーダル</code>があります。 <code>Ok</code> ボタンを押しても自動的に閉じないようにしたいので、「防止」を使用します。次に、いくつかの検証を行ってから、「非表示」メソッドを使用して閉じたいと思います。しかし、私にはうまくいきません。奇妙なことに、show メソッドは完全に正常に機能します。ドキュメントを確認しましたが、エラーの場所が見つかりません。その時点で非表示メソッドを機能させるにはどうすればよいですか?
これが私のコードです。 </p>
<pre class="brush:js;toolbar:false;"><テンプレート>
<div>
<bボタン
サイズ = "sm"
クラス="m-2"
バリアント = "プライマリ"
@click="grfGuardarBtnPredefAccions()"
>個人用グラフィックを保護</b-button
>
<b-モーダル
id="grfModalGuardar"
ref="grfGuardarModal"
title="挿入番号"
@ok.prevent="grfModalOk"
@cancel="grfModalCancel"
>
<p>
保護者の個人的な名前を指定します。
</p>
<b-フォーム入力
v-model="grfModalPersoName"
placeholder="Escriba aquí ..."
></b-form-input>
</b-modal>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前: 「グラフトップメニュー」、
コンポーネント: {
グラフ編集者、
}、
データ() {
戻る {
// 保存されるカスタム グラフにユーザーが指定した名前を格納します。
grfModalPersoName: ""、
};
}、
計算: {}、
メソッド: {
/**カスタム グラフの保存ボタンによって実行されるアクション*/
grfSaveBtnPredefActions() {
let errormsg = "";
if (this.grfTableGrafica.tableConf.items.length == 0) {
errormsg = errormsg "空のグラフを保存できません";
}
if (!errormsg) {
this.$refs.grfSaveModal.show();
} それ以外 {
generalUtils.makeToast(
「危険」、
3000、
「空のグラフは保存できません。」
);
}
}、
grfModalOk() {
if (!this.grfModalPersoName.trim()) {
generalUtils.makeToast(
「危険」、
3000、
「名前を空にすることはできません。」
);
} それ以外 {
console.log("ok");
console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
console.log("this.grfTableGrafica", this.grfTableGrafica);
this.$refs["grfSaveModal"].hide();
// this.$refs.grfSaveModal.hide();
}
}、
grfModalCancel() {
this.grfModalPersoName = "";
}、
}、
};
</スクリプト>
<スタイル>
</スタイル>
</pre>
<p>我尝试的语法:</p>
<pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide();
this.$refs['grfSaveModal'].hide();
this.$bvModal.hide('grfSaveModal');
</pre>
編集: v-model を使用しましたか?データを v-model に渡し、必要に応じて更新します
別の選択肢もあります。
リーリーまたは、v-model 属性を使用して Bootstrap Vue モーダル ボックスを制御することもできます。
ドキュメントを確認してください。
問題は、閉じるのを妨げながら、同時に閉じようとしているということです。
この問題は、
リーリーthis.$nextTick
を使用して隠しメソッドを次の瞬間に延期することで解決できます。