「Bootsrap-Vue Modal の非表示メソッドが無効です」
P粉428986744
P粉428986744 2023-08-25 17:59:43
0
2
582
<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>
P粉428986744
P粉428986744

全員に返信(2)
P粉020556231

編集: v-model を使用しましたか?データを v-model に渡し、必要に応じて更新します

別の選択肢もあります。

リーリー

または、v-model 属性を使用して Bootstrap Vue モーダル ボックスを制御することもできます。

ドキュメントを確認してください。

いいねを押す +0
P粉344355715

問題は、閉じるのを妨げながら、同時に閉じようとしているということです。

この問題は、this.$nextTick を使用して隠しメソッドを次の瞬間に延期することで解決できます。

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート