ホーム>source

私はVueJにかなり慣れていないので、助けてくれてありがとう。 .NetCore MVCとVueを一緒に使用しています。それは単一ページのアプリケーションではありません...

質問:
私のウェブサイトでは、コンポーネントに確認モーダルが表示されています。モーダルページにはキャンセルボタンがあり、ユーザーがキャンセルボタンをクリックした場合、ParentクラスでmodalBoxプロパティをfalseに設定します。

私がしたこと:これは私のコンポーネントです。

<前>ウィズウィズ

マイレイアウトページ

<前>ウィズウィズ

メインVueクラス-親

<前>ウィズウィズ

});

ウィズウィズ

基本的に、ユーザーが[キャンセル]ボタンをクリックしたときにmodalBoxプロパティをfalseに変更する必要があります。

Vue.component('modalquestion-box', { props: ['modalBox', 'message', 'messagedetail'], data() { return { isHidden: true } }, watch: { modalBox: function () { if (this.modalBox == true) $('#adjConfirmModal').modal('show'); } }, methods: { "cancelBtnSelected": function () { console.log('Cancel Selected'); this.modalBox = false; } }, template: `<div class="modal fade" id="adjConfirmModal" tabindex="-1" role="dialog" aria-labelledby="adjConfirmModalTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="adjConfirmModalTitle">Confirm</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Are you sure ?</p> </div> <div class="modal-footer"> <button type="button" v-on:click="cancelBtnSelected" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" v-on:click="adjConfirmed" class="btn btn-success">Confirm</button> </div> </div> </div> </div>` });
あなたの答え
  • 解決した方法 # 1

    サブコンポーネントでは this.$emit('closemessage') を使用します

    ウィズウィズ
    

    <modalquestion-box v-on:closemessage="modalBox = false"></modalquestion-box> /************** sub *******************/ cancelBtnSelected: function () console.log('Cancel Selected'); this.modalBox = false; this.$emit('closemessage') // A function that is sent to the parent component binding }

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ php - composerの正しいauthjsonを作成する