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

Generate a flexible JSON array in VB.NET

Looking to generate a flexible array that can be converted into a JSON array for visualization with Morris charts. The usual approach in VB.NET is as follows: Dim xArray(2) xArray(0) = New With {Key .TradingDay = "Day1", .Seller1 = 1500, .Seller2 = 160 ...

In Vue.js, is it possible to nest a <tr> tag inside another <tr> tag?

I've been working on a dynamic table in vue.js, using the code snippet below: <template> <tr class="left-align" v-for="(item,index) in itemList" :key="index.id"> <td>{{item.items}}</td> ...

Exploring the Fusion of Material UI Searchbox and Autocomplete in React

Looking for help with my AppBar component from Material UI. I want the Searchbox field to function similarly to what is seen on https://material-ui.com/. It should appear as a Searchbox but display selectable options like Autocomplete after entering input. ...

Is there a way to display all of them inline in Woocommerce?

Can anyone assist with making each of these inline? <div class="atc_nsv"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopify.com/s/files/1/0608/5882/6972/fi ...

Leveraging async/await in express

I am encountering an issue with my app.post method while trying to deploy on Firebase. The error message reads: Parsing error: Unexpected token =>. I am fairly new to node.js and Javascript as I primarily work with Swift. However, I require this code fo ...

If a DOM element contains any text node, completely remove the element

Currently, I am using WordPress and my theme automatically generates a menu where all the items are marked with "-". It can be quite annoying. I have tried to fix it by replacing all the option values instead of just removing the "-", but I couldn't g ...

Encountering issues after updating Laravel Mix to the newest version

I recently upgraded my app to Laravel 9 using Laravel Shift. Everything was going smoothly until the upgrade bumped up the laravel-mix version to 6.x. This caused some compilation issues which I managed to fix. However, now when I try to run the frontend, ...

Populate the dropdown menu with data from a JSON file

Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...

Notification within the conditional statement in React JS

I am working on validating phone number input within a React JS component using an if/else statement. If the user enters letters instead of numbers, I want to display a message saying "please check phone number". While I have been able to create a function ...

Mocking vuex getters using sinon.js

Within my application, I am using a navigation guard with my router that relies on a namespaced vuex getter to verify the authentication status of the user. This getter performs the necessary checks to determine if the user is authenticated. I am trying t ...

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

Guide for bringing in a complete npm library into React Native beyond just a single file access

Currently, I am facing an issue with importing the sjcl library into my project. Even though there are multiple files within the library, I am only able to import one file successfully. This is what I have tried from the command line: npm install sjcl -- ...

Setting the rotation position in JQuery prior to initiating the animation

Perhaps I could phrase my query differently as How can I rotate an image in JQuery from a starting position other than 0 degrees. I am attempting to animate the rotation of an image from -50deg to 0deg. However, regardless of what I do, JQuery seems to al ...

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Is there a way to customize the file name of a generated PDF using "@react-pdf/renderer": "^2.3.0"? Currently, when I download a PDF using the toolbar, it saves with a UID as the file name (e.g., "f983dad0-eb2c-480b-b3e9-574d71ab1 ...

The div on my webpage is not loading its content as expected when using JavaScript

I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...

The error middleware in Express is not defined

I'm facing an issue where the Express API error messages are returning as undefined on the frontend. This is preventing me from displaying proper error messages to alert users. Interestingly, the error messages seem to appear fine in the developer to ...

Insects featuring a button and tooltip duo creating a captivating "pull-effect"

Why is the button pulling when I move the cursor over a camera? Is there a way to solve this issue? <div class="input-group-btn advanced-group"> <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Send Imag ...

Modifying pagination numbers with Reactjs: A step-by-step guide

I am currently working on Reactjs (nextjs) and I have successfully integrated the "Nextjs" framework. The pagination is working fine, but the buttons are displaying as "1,2,3,20" instead of "1,2...20" (showing all numbers without using "..."). How can I mo ...

Using jQuery within an Angular Controller: The specific function $(...).overhang is not recognized in this context

Recently, I decided to integrate overhang.js into my application because of its appealing alert messages. Initially, it seemed like a simple task... All I needed to do (or so I thought) was replace the line in my controller, alert("An HTTP request has be ...