Switch Button with Vuejs

Question

Here’s what I wanna do:

Pessoa Click on Botao Contratar that is green with Bootstrap It changes the class of the button. In short: Clicked the button he becomes another.

What method and event should I do here... I understand about v-bind v-on I know that, but I want to know which event should have to exchange template type change.Templateto(enviar) something like that...

with VUEJS please:

<div id="app">
   <botao-contratar></botao-contratar>
</div>

 <template id="contratar">
   <a href="#" class="btn btn-success">Contratar</a>
 </template>

 <template id="ativar">
   <a href="#" class="btn btn-info">Ativar</a>
 </template>

Part of the VUEJS:

          Vue.component('botao-contratar',{
            template: '#contratar',
          });

          Vue.component('botao-ativar',{
            template: '#ativar',
          });

          var app = new Vue({
            el: "#app",
            data: {
              titulo: "vuejs",
            }
          });

Answer 1

Use the Vue Binding for classes together with a boolean variable to toggle between the classes you want.

See in the example below the use of Binding :class to toggle the class of the button between btn-success and btn-outline-danger (more Bootstrap classes for buttons on documentation).

HTML:

<div id="app" class="m-2">
  <a href="#" class="btn btn-success" @click="isActive = !isActive" :class="{ 'btn-success': !isActive, 'btn-outline-danger': isActive }">Contratar</a>
</div>

Javascript:

new Vue({
  el: '#app',

  data: {
    isActive: false
  }
});

Behold here this example in operation.

Answer 2

The way you’re talking, sounds more like a case for v-if or v-show.

<button v-if="metodo === 'contratar'" @click="mudarMetodo('ativar')">Contratar</button>
<button v-if="metodo === 'ativar'" @click="mudarMetodo('contratar')">Ativar</button>

Vuejs:

new Vue({
  el: '#app',
  data: {
    metodo: 'contratar'
  },
  methods: {
    mudarMetodo (tipoMetodo) {
       this.metodo = tipoMetodo
    }
  }
});