Cannot get the before-leave transition JavaScript hook to function properly in Vue.js

I am facing an issue with my variable, transitionName, in the beforeLeaveHook function. Despite attempting to change it to 'left', the value remains stuck at 'right'. Any assistance on resolving this matter would be greatly appreciated.

<template lang="pug">
    transition(:name="transitionName" v-on:before-leave="beforeLeaveHook")
        .componentMain
            h1 {{transitionName}}
</template>

<script>
 export default {
 name: 'Component',
 data () {
  return {
    transitionName: 'right',
  }
 },
 methods: {
   beforeLeaveHook: function(event){
   this.transitionName = 'left';
   }
 }
 }
</script>

Answer №1

The event called before-leave will only trigger once the .componentMain element is removed.

Take a look at this example:

new Vue({
  el: '#app',
  data () {
    return {
      transitionName: 'right',
      show: true,
    }
  },
  methods: {
    beforeLeaveHook() {
      this.transitionName = 'left';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="show = !show">Toggle</button>
  <transition :name="transitionName" v-on:before-leave="beforeLeaveHook">
    <div class="componentMain" v-if="show">
      <h1>
        {{transitionName}}
      </h1>
    </div>   
  </transition>
</div>

Answer №2

Just wanted to express my gratitude for the assistance provided. I was in search of route-specific transitions for my application and successfully resolved the issue by utilizing the beforeRouteUpdate(to, from, next) method within the parent component to validate the paths before proceeding with the transition. Leveraging Vuex, I was able to establish the appropriate transition, followed by implementing a computed property in the child component to monitor changes in transitionName.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

Is the jQuery ajax .done() function being triggered prematurely?

Struggling with a problem here. I'm dealing with this code (simplified): var initializeZasilkovna = function () { // Initialize object window.packetery.initialize(); }; // Check if the object doesn't exist if (!window.packetery) { // It ...

The body onload function fails to run upon the page loading

I'm having trouble with my body onload function not executing. When I load the page, I want to display all records that are selected in the drop_1 dropdown and equal to ALL. I have a script that sends values q and p to getuser.php. The values sent are ...

Iterating through images one time and capturing the mouse coordinates for every click made by the user

I have the following code snippet that displays a series of images and I would like to capture the coordinates of each mouse click on these images. Is there a way to send these coordinates to my email at the end of the image loop? Any assistance in achievi ...

What could be causing this issue to not function properly in JavaScript?

Here is a JavaScript code snippet that I am working on: var inx=[2,3,4,5]; var valarray=[]; for (i=0; i<inx.length; i++) { valarray[i]==inx[i]; } for (i=0; i<inx.length; i++) { var posi=inx.indexOf(3); var valy=valarray[posi-1]+1; v ...

What is the process for sending an InMemoryUploadedFile to my S3 storage?

My upload form is quite simple and includes an image as a FileField: def post(request): if request.user.is_authenticated(): form_post = PostForm(request.POST or None, request.FILES or None) if form_post.is_valid(): inst ...

Issue with the PrimeVue Toast Component: Unable to find the file 'ToastMessage' in the directory */toast

Embarking on a new project with vuejs, I decided to incorporate primevue components. However, my VueJS expertise is still in its early stages. The application utilizes a webpack-based build with vue-loader set up, facilitating the installation of primevue. ...

Can terminating a POST XHR request be trusted?

Running an apache server with PHP 5.4. I've set up a form that sends an asynchronous request to the server and stops any previous requests if the button is clicked again before the current request is completed. If I repeatedly click the button quick ...

Troubleshooting Vue/Vuetify: Inability to use the Esc key to show/hide dialog in parent component

I have been utilizing the vuetify library in my project. I encountered an issue where the ESC key does not work when opening a dialog from a child component to a parent component for the first time. It seems like there might be a mistake in my implementati ...

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

Having difficulty transforming a JSON string into a JSON object using Javascript

Currently, I am working on a hybrid mobile application using Angular. I have a string that is obtained from a $http.jsonp request and I am attempting to convert the response into JSON format. After checking the validity of the JSON at , it appears to be va ...

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

Is there a way to transform a JSON object into a custom JavaScript file format that I can define myself?

I have a JSON object structured as follows: { APP_NAME: "Test App", APP_TITLE: "Hello World" } My goal is to transform this JSON object into a JavaScript file for download. The desired format of the file should resemble the follo ...

What is the process of sending a post request using axios to insert data into a database in React

I am currently working on a login system using mysql, axios, express, and react. The database connections are functioning properly, but I am encountering errors specifically with these two posts, displaying messages like "ERR_CONNECTION_REFUSED" and UNCAUG ...

Attempting to update information in JSON using AJAX and PHP

I am attempting to update key values in a JSON object using PHP, AJAX, and JavaScript to display the new values. Here is an example of my JSON database that needs to be modified: "answer01count": "1", "answer02count": "2", "answer03count": " ...

Exploring ways to simulate promises online for integration into my personal Vue.js project

Is it possible to import and activate a mocker in the main.js file of a Vue.js project? Can it be done after: import Vue from 'vue' App from './App' ? How do I initiate it, by the way? Thank you in advance for sharing your thoughts. ...

Unable to execute commitlint in husky along with a different custom command

Is it possible to set up two precommit hooks with husky? Specifically, I want to integrate commitlint along with a custom script specified in my package.json. After installing husky and creating a pre-commit script in the .husky folder, here is what I have ...

Handling Errors: Communicating with the Frontend

I'm facing a challenge with error handling in my authentication API calls. Whenever I trigger the 500 status from Express, my frontend (using Vue) only displays the message Request failed with status code 500 instead of something more informative like ...

capturing the HTML title and storing it in a JavaScript variable

Is there a way to retrieve the title "Some Name" in the JS file and have it be populated by the hyperlink's title attribute, which is set to "sometitle" in the HTML code? JS var randomtext={ titleText:"Some Name",} HTML <a class="css" title="so ...

In what format is the parameter accepted by the .getDay() method?

Here's the plan: I need to extract information from an input element with type set as date. This data will then be stored in a .json file and later parsed when the program is initiated. Subsequently, I aim to utilize the date.getDay() function to dete ...