vue.jsnuxt.jsnuxt3.jselement-plus

I am trying to use before-leave to take a specific decision when the user changes the el-tab in Nuxt / Vue


I am using Element Plus tabs to switch between different page contents. Each tab contains a form. If a user fills out a form and tries to switch tabs without saving, they should receive a warning that their changes will be lost.

template in pug:

<template lang="pug">
el-tabs.mt-5(v-model="activeName" class="demo-tabs" @tab-click="handleTabChange" @before-leave="handleBeforeLeave")
      el-tab-pane(:label="$t('privacyPolicy')" name="privacyPolicy" )
      el-tab-pane(:label="$t('termsAndConditions')" name="termsAndConditions" )
      el-tab-pane(:label="$t('paymentPolicy')" name="paymentPolicy"  )
</template>

I found that @before-leave in Element Plus should run before switching tabs. However, when I use it, the function doesn't trigger at all. I'm using the latest version of Element Plus.

script:

<script setup>

const handleBeforeLeave = function(activeName: TabPaneName, oldActiveName: TabPaneName):void | boolean {
  console.log(activeName, oldActiveName)
  return false

}

</script>

Why isnt the @before-leave callback function being triggred ?!

I used Element Plus tabs to switch page content based on the selected tab. I want to trigger a function before switching tabs to warn users that their changes will be lost.

Expected result: The function runs and prevents tab switching. Actual result: Nothing happens.


Solution

  • The before-leave is not an event and should be passed via v-bind:before-leave (or :before-leave).

    In Element Plus documentation, attributes, events, and slots are typically categorized on the right side using dedicated sections labeled Attributes, Events, and Slots.