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.

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.

• vue.js
• nuxt.js
• nuxt3.js
• element-plus

Share Improve this question Follow edited Mar 11 at 21:28 Adham Saleh asked Mar 11 at 18:04 Adham SalehAdham Saleh 322 bronze badges 2

• I didn't find the before-leave event in Element Plus#tabs documentation. Where did you see it mentioned? – yuanyxh Commented Mar 12 at 5:25
• element-plus./en-US/component/tabs.html#tabs last item in tabs attributes table or simply search for before-leave – Adham Saleh Commented Mar 12 at 17:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.