編集中データがある場合のタブ切り替えキャンセルがうまくいかない

Question

仕様

• タブ内の値を編集し保存することができる
• 編集中のデータがあった場合、確認ダイアログにてタブの切り替えをキャンセルする
• 以下イメージ

使用技術

Nuxt.js(Vue.js) + TypeScript + ElementUI

困っていること

• キャンセルを押してもタブが切り替わってしまう

実装

• タブを離れる前にcheckEditedというメソッドが走る。javascript側ソースのeditedItemsに配列が格納されていれば編集中ということなので確認ダイアログを出す仕組み。
• javascript側ソース内のboolの値がfalseのとき、falseを返却すればタブ切り替えがキャンセルされる認識だったが普通にタブが切り替わってしまう。
• ご指摘いただけると幸いです。

    <el-tabs
      v-model="activeTab"
      :before-leave="checkEdited"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :name="index.toString()"
        :label="item.tabName"
      ></el-tab-pane>
    </el-tabs>

async checkEdited() {
   // editedItemsに編集中の項目が入る
   const editedItems = await this.geItemsEdited()
   if (editedItems.length !== 0) {
     // ここでダイアログでキャンセルを押すとタブが切り替わってしまう
　　　const bool = confirm('確認メッセージ'))
     if (!bool) {
       return false
     }
   }
 }

Answer 1

この場合、falseをreturnではなく、errorを出したり、promiseのrejectを実行してください