Vue Js Change Button Text onclick
In this tutorial, we will learn how to change button text on click. We will provide two examples to update the button text on click. To achieve this, we will use both the Composition API and the Options API. The @click directive is used to listen to specific events and call a method when this event is triggered
Thanks for your feedback!
Your contributions will help us to improve service.
How to change Button Text Dynamically?
The following code snippet uses Vue js to change the text of a button when clicked. Initially, the buttonText variable is set to "Click me" and it changes to "Button clicked!" when the button is clicked using the changeButtonText method. If you wish to add or modify more code, you can use the Tryit Editor to edit and customize the code according to your project requirements.
Output of above example
In the example below, we can change the button text on click by utilizing the Composition API of Vue and ref
. With the ref
function, we were able to create a reactive reference to the button text property.