Change Button Text and Color in Vue js

Question

I have this button that I did in vue component file.

<td>
     <button id="save" type="submit" class="btn btn-primary my-2" v-on:click="added"> Add to Email List </button>
</td>

I want to make this button changed color & text when clicked by user. Example before click, "Add to email list" will be displayed, once clicked "Added" will be displayed instead and the color will be changed (currently in the css the color is blue, and I want to change it to green once clicked). Any help would be greatly appreciated. Thank you!

topdev87 · Accepted Answer · 2021-02-09 03:02:20Z

2

Define clicked variable which indicates if button is clicked or not.

<td>
  <button
    id="save"
    type="submit"
    v-bind:class="{ 'btn-danger': clicked, 'btn-primary': !clicked }"
    class="btn my-2"
    v-on:click="added" 
  >
    {{ clicked? "Added" : "Add to Email List" }}
  </button>
</td>

data: () => ({
  ...
  clicked: false
})
methods: {
  added() {
    this.clicked = true;
  }
}

answered Feb 9, 2021 at 3:02

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change Button Text and Color in Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related