Navigate to a specific URL path and send properties as arguments in the function for handling events

I am working on a vuetify autocomplete search feature. When a user selects an item, I need to navigate to a specific route and pass some props along.

However, my attempts to change the current route without passing props have resulted in errors. Here is what I tried:

v-on:input="this.window.location.href = '/markets'"
v-on:input="this.$router.push({path: '/markets'})"

Both of these approaches gave me the following errors:

Error in v-on handler: "TypeError: Cannot read property 'location' of undefined"
Error in v-on handler: "TypeError: Cannot read property '$router' of null"

So my question is, how can I successfully change the route and pass props to the "Markets" component within the event handler?

EDIT: Instead of directly changing the route, I tried using a method:

I encountered the same error with v-on:input="goToMarkets()"

methods: {
    goToMarkets(){ this.window.location.href = '/markets' }
}

Error in v-on handler: "TypeError: Cannot read property 'location' of undefined"

Answer №1

The issue lies in the fact that this context is not accessible within the template. This is why you're receiving the error message * is not available on undefined

To resolve this, you should create a method and call it within the template.

The error thrown when using this.window.location is due to window being a global object, not accessible through this. Instead, use window.location directly in the method.

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

Unexpected state being returned by Vuex

I am encountering an issue with a pop-up modal that is not behaving as expected. The condition for the pop-up to appear is if the user has no transactions, which is determined by checking the length of the depositHistory array. If the length is greater tha ...

In JavaScript, Identify the filename selected to be attached to the form and provide an alert message if the user chooses the incorrect file

I have a form in HTML that includes an input field for file upload. I am looking to ensure that the selected file matches the desired file name (mcust.csv). If a different file is chosen, I want to trigger a JS error. Below is the form: <form name="up ...

reversed json using javascript

Is it possible to efficiently reverse the order of the following JSON object: { "10": "..." "11": "...", "12": "...", "13": "...", "14": "...", } so that it becomes: { "14": "...", "13": "...", "12": "...", "11": "... ...

Reloading data in Angular using jQuery DataTables

After successfully implementing the jQuery datatables library, I encountered an issue where new data retrieved from my API was not displaying inside the datatable as expected. Instead, it was being shown below the table using ng-repeat. It seems that the d ...

Localhost is unable to process AngularJS routes containing a dot in the URL

When using the route provider and setting this specific route: .when('/:name/:id', { It successfully navigates to my desired path and executes the code when I enter: https://localhost.myapp.com:9000/Paul/123 However, it fails to work with this ...

How can I bring a component into another component in Vue.js using its route name?

I am looking to incorporate a Vue.js component page into another component using the route name. Can someone guide me on how to achieve this? For example, consider the code snippet below: { path: '/dashboardadmin', component: require('./com ...

Material Style Minimal - There is a slight space between the text field and the colored line at the bottom

Having a problem with Material Design Lite text field where there is a small gap between the bottom colored line and the gray starting line. Every MDL text field example I try on my page shows the same issue. What could be causing this locally? My frontend ...

What is causing the unexpected behavior in this Vue transformation?

I am currently attempting to implement a simple slide panel using Vue.js, similar to the one shown in this example website: . However, I am facing an issue where the panel does not slide; instead, it waits for 2 seconds and then closes without any animatio ...

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

Enhance vue.js by adding your own custom filters

I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome. My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a ...

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1') .done(function( json ) { $(tar).closest('.accordion').children('div').text(json); }); I have successfully obtaine ...

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

A guide on getting the `Message` return from `CommandInteraction.reply()` in the discord API

In my TypeScript code snippet, I am generating an embed in response to user interaction and sending it. Here is the code: const embed = await this.generateEmbed(...); await interaction.reply({embeds: [embed]}); const sentMessage: Message = <Message<b ...

Node.js can be used to easily set the values of HTML elements

After successfully setting up a node.js connection to my mysql database and being able to retrieve and input data using connection.query(), I now want to display the database information on my HTML elements. Is there an equivalent of getElementById for t ...

Why doesn't the Iframe onLoad event trigger when uploading a file?

I have a straightforward iframe <iframe class="ifr" src="about:blank"></iframe> It contains an onload handler. $(".ifr").on('load',function (){ alert("iframe loaded") }); There are also two buttons: Pressing the first button ...

Firebase: The Firebase application under the name '[DEFAULT]' is already present (app/duplicate-app)

My Nuxt/Vue.js application requires me to export various Firestore-related elements instead of just firebase.firestore(). Despite this, I am encountering an error stating Firebase App named '[DEFAULT]' already exists (app/duplicate-app) with the ...

Ways to store Token in Browser Cache?

I am currently developing a login system for an application at my school. I have successfully implemented user registration, which is saved to my Azure DocumentDB. However, when trying to log in with the user, the token does not get saved so that I can acc ...

The ngModel directive automatically clears the checkbox's Checked status

Currently, my Angular code is set up to validate a checkbox using ng-model: <input type="checkbox" name="news1" value="news1" ng-model="news" <c:if test="${xxxx == yes'}">checked="checked"></c:if>> <label ng-click="news1();"&g ...

A Nuxt plugin that integrates a separate website into the serverMiddleware

The concept Imagine having a main Nuxt website just like any other. Now, think about adding my module to your project. This module will then introduce a subdomain "admin.example.com" to your project, creating a fully functional Nuxt-based website that ope ...