[Vuejs]-Vue toggle color and text of button when clicked

3👍

<button class="btn btn-primary btn-block" :style="{ 'background-color': color }" v-on:click="pauseEvent" type="button" role="button" id="" aria-expanded="false" style=" color: #6c757d border:none; border-radius: .15;">
            {{text}}
        </button>

You can use Vue data function. Example of here

        data(){
            return {
                color: 'green',
                text: 'Started'
            }
        },
        methods: {
           pauseEvent() {
               this.color = 'red';
               this.text = 'Paused';
           },
        }

Leave a comment