検索

ホームページ  >  に質問  >  本文

「Bootsrap-Vue Modal の非表示メソッドが無効です」

<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粉428986744P粉428986744487日前607

全員に返信(2)返信します

  • P粉020556231

    P粉0205562312023-08-26 15:11:58

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

    別の選択肢もあります。

    リーリー

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

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

    返事
    0
  • P粉344355715

    P粉3443557152023-08-26 11:19:55

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

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

    リーリー

    返事
    0
  • キャンセル返事