Tips for redirecting in Vuejs when the input focus is not true

I have a Vue view where the search input automatically focuses when opened. However, if the user clicks away from the input, I want the view to redirect back.

I've searched for solutions to this problem but have not had any luck. Here is my code using Vue JS 2:

<input v-focus="focused" @focus="focused = true" @blur="focused = false" type="text" class="form-control" aria-label="search">
import { focus } from 'vue-focus'

export default {
  directives: { focus: focus },
  data () {
    return {
      focused: true
    }
  }
}

I am currently using the vue-focus package, but I'm open to suggestions for native solutions.

If the input loses focus, I would like it to automatically redirect to another link.

Answer №1

Instead of @blur="focused = false", consider using @blur="goBack" where goBack is a custom method that navigates to the previous page based on your desired logic.

For those utilizing Vue Router, you can achieve a similar effect by using this.$router.go(-1).

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

What is the best way to smoothly insert an item into a nested object within the state of a React component

Trying to create a complex array using react hook: const [strategy, setStrategy] = useState([leg]); Here's how the `leg` object is defined: const leg = { entry: { conditions: [], actions: [""], }, exit: { conditions: [], ...

Modify the main container width based on the size of the table

Would it be possible for the main container width to increase along with the table width? Is that achievable? <div class="container main-con"> <table class="table table-hover"> <tr><td></td></tr> </table> ...

Custom directives are unable to interact with inbuilt directives

var app = angular.module("myDiscuss", []); app.controller("TabController", function() { this.tab = 0; this.subTab = 0; this.like = 0; this.selectLike = function(setTab) { this.like= setTab; }; this.selectTab = function(setTab) { this. ...

Capture the <html> element using jquery

Is there a way to target the <html> tag using jQuery? Below is my current code snippet: $('.btn').on('click', function() { $.post('/path/to/window.php', {id: $(this).data('id')}, function(res) { ...

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

Tips for clearing a highlighted selection in mark.js without affecting other selections:

I have a form set up to highlight matching text as you select checkboxes on the page. It works well when checking boxes, but if you uncheck one box out of many checked, all highlights disappear. I want it to only remove the highlight from the unchecked box ...

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Using p5.js, I am creating drawings with data from a JSON provided by my Django backend. The draw function is defined at the base level of my HTML document within the script element: function draw(json) { if (json["leaf_text"]) { stroke(100) el ...

What is the best way to specify the JSDoc types for this.field within the Mocha TestContext during the before() hook, in order to provide clarity for other it() tests as well as IntelliJ?

I am looking for IntelliJ, or a similar IDE like WebStorm or VSCode, to provide auto-complete for the fields I define in my Mocha.js before() hook within my test context. Furthermore, I want to have access to the auto-complete documentation of those fields ...

Concerning the issue of components not loading correctly when using Angular with Lazy Loading Routing

Encountering an unusual issue while utilizing lazyload routing in our application! Within AppModule, there is TopModule followed by DashboardModule, all being loaded lazily. When localhost:4200/dashboard is accessed, the loading sequence is AppModule, To ...

Ways to generate a customized template using the directive attribute parameter

I have developed a new directive and I am looking to incorporate a dynamic template using the attribute wm.data.typeName. wm.data.typeName = "<span>html code</span>" <fill-choose model-input="wm.data.modelInput" text="wm.data.typeName"&g ...

Is it possible to access all the variables within a specific scope or explore different scopes using console.log?

In the process of writing a graph algorithm, I am currently working on implementing a removeEdge method in the graph prototype. This method takes two arguments, which are the two nodes that will be losing their connection. I have successfully achieved a ...

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

As someone who isn't an expert in any specific coding language, I have a knack for piecing things together to make them work. However, my current challenge is stretching my technical abilities a bit too far. Here's what I'm trying to achieve ...

What is the best way to integrate RequireJS into both the main and child pages?

Within my .NET Framework master page, I've integrated require.js like so: <script data-main="../../Scripts/Shared/_MaintenanceTemplateApp" src="../../Scripts/require.js"></script> Inside _MaintenanceTemplateApp.js, I have set up the conf ...

Is there a way to link to mouseover and mouseleave actions while utilizing ng-options?

I am trying to create a directive that will handle the mouseover and mouseleave events for the option elements within this select element: <select class="form-control" custom-directive="" ng-model="vm.selectedPersonalInfo" ng-options="personalInfo as p ...

Is Your Website Optimized for All Devices?

Creating this website was just a little project for me. I've been experimenting with different methods to ensure it's compatible with all devices and fits perfectly on each screen. Unfortunately, I'm pretty clueless when it comes to @media ...

How can I make the URL dynamically update when loading views into a layout using ajax in CakePHP?

function loadContent(source){        $.ajax({              type: "post",  // Method: post              url: source, // Source URL              success: function(response) {                    ...

In the world of Knockout JS, forget about using e.stopPropagation() because it won't

In my table, I have two actions that can be performed: Click event on the row level and click while checking a checkbox inside that row. However, when the checkbox is checked, I do not want the click event on the row to be triggered. <tbody data-bin ...

Loading Angular Controller in a dynamic fashion

I am attempting to dynamically load controllers using ocLazyLoad: $ocLazyLoad.load('./ctrls/login.js'); However, I am encountering an error stating: The controller named 'loginCtrl' is not registered. angular.module('opt ...

JavaScript module declarations in TypeScript

Recently, I delved into the world of a Node library known as bpmn-js (npmjs.com). This library is coded in JavaScript and I wanted to incorporate typings, which led me to explore d.ts files. My folder structure looks like this webapp @types bpmn ...