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.
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.