Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

Question

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag.

Previously, the <a> tag was written like this:

<a type="button" class="uk-button uk-button-link" href="#events">Events</a>

However, using the <button> tag in this way did not produce the desired result.

<button @click="location.href='{{ url('events') }}'" class="uk-button uk-button-link">EVENTS</button>

Please note: An ESLint error is being displayed stating '[js] ';' expected'.

css vue.js

Answer 1

Answer №1

Your solution is on point, but unfortunately, it's not performing as expected in a single-page application due to an undefined error with scopelocation.

Therefore, I've come up with an alternative method:

      <button @click="goToEvents()" class="uk-button uk-button-link">EVENTS</button>

and

methods: {
    goToEvents: function () {
        location.href='#events'
    }
},

Answer 2

Your solution is on point, but unfortunately, it's not performing as expected in a single-page application due to an undefined error with scopelocation.

Therefore, I've come up with an alternative method:

      <button @click="goToEvents()" class="uk-button uk-button-link">EVENTS</button>

and

methods: {
    goToEvents: function () {
        location.href='#events'
    }
},

Answer 3

Answer №2

If you want to implement an onclick event with Vue, here's how you can do it:

<button v-on:click="location.href=url('events')" class="uk-button uk-button-link">EVENTS</button>

Another way to achieve the same result is by using

@click="location.href=url('events')"

Check out Vue Event Binding for more detailed information.

If you are working within a form and wish to prevent the form submission when clicking the button, you should include .prevent, like so:

v-on:click.prevent="url('events')"

Remember to use {{ }} (mustache) syntax when rendering text content. For dynamic values in attributes, use the colon prefix :. For example, to assign a dynamic value to a data attribute, you would write

:data-something="myDataProp"

Answer 4

If you want to implement an onclick event with Vue, here's how you can do it:

<button v-on:click="location.href=url('events')" class="uk-button uk-button-link">EVENTS</button>

Another way to achieve the same result is by using

@click="location.href=url('events')"

Check out Vue Event Binding for more detailed information.

If you are working within a form and wish to prevent the form submission when clicking the button, you should include .prevent, like so:

v-on:click.prevent="url('events')"

Remember to use {{ }} (mustache) syntax when rendering text content. For dynamic values in attributes, use the colon prefix :. For example, to assign a dynamic value to a data attribute, you would write

:data-something="myDataProp"

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

Answer №1

Answer №2

Similar questions

Modifying the color of a placeholder in an HTML input using CSS

Aligning Content in the Center of a CSS Grid

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

The program encountered an error because it was unable to access the overview property since it was undefined

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

Error: Failed to load chunk (VueJS + Webpack) - Please try again

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Unleashing the power of Sass and CSS in your Next Js project

Tips for splitting a container of specific height into sections measuring 80% and 20%

Investigating Jquery Flip Card Issues

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Search field in DataTables appears to be misaligned

I would like to terminate the property when processing it on a mobile device

Tips for adjusting the height of a Safari extension during runtime

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

loop not functioning properly with file type input

Building a custom Vuetify extension to enhance core features

The Art of Validating Forms in Vue.js

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Struggling to properly send props to the child component in Vue 3