Go to a route and pass props in event handler

Question

I have a vuetify autocomplete search and when an item from that is selected, I want to go to a specific route and pass props.

Without first passing props, I have attempted to just change current route like so, when a model is selected by v-autocomplete

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

These give 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 how do I change route and pass props to the "Markets" component in the event handler?

EDIT: Passing method instead

Same error for 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 problem is that this context is not available in the template. That's why it's telling you * is not available on undefined

You will need to create a method and reference that in the template.

the reason this.window.location gives you an error is that window is a top level object, and not on this . Use window.location instead in the method.