Как изменить класс кнопки при клике в Vue?

Question

В настоящее время у меня есть этот код, который, кажется, работает:

<button class="initial" :class="{'is-active': activeTab === 1}" name="button">START</button>

Однако, когда я нажимаю на кнопку, он не применяет класс is-active и остается стилизованным в начальном классе.Может ли кто-нибудь помочь?

Answer 1

Это самое короткое расстояние для выполнения.

См. Это в действии - https://codepen.io/stephanieschellin/pen/WaZvPR

HTML

<div id="app">

  <button 
    v-bind:class="{ 'i-am-active': button_active_state }"
    v-on:click="button_active_state = !button_active_state"
    name="button"
  >START</button>

</div>

JS

new Vue({
  el: '#app',
  data: {
    button_active_state: false
  }
});

CSS

.i-am-active {
  color: orange;
}

Объяснение

В Vuejs, если ваша переменная данных является логической, используя true / false, вы можете использовать!модификатор для переключения его значения между истиной и ложью.

v-on:click="button_active_state = !button_active_state"

Это позволяет избежать вызова метода для выполнения условной проверки и изменения значения истина / ложь.Все, что нужно для переключения значения, запекается в Vue.

Более подробный пример см. - https://www.tutorialsplane.com/vue-js-toggle-class-click/

Answer 2

Несмотря на базовый API, мне не нравится создавать объект для использования одного динамического класса, я создал эту маленькую библиотеку, v-стильный

Посмотрите, какпросто переключить класс с ним:

Vue.use(vStylish.default);

new Vue({
 el: '#app',
 data: function() {
  return {
    isActive: false
  };
 },
 methods: {
   toggleState: function() {
     this.isActive = !this.isActive;
   }
 }
});

button.is-active {
  background-color: lightblue;
  border: green solid 2px;
  color: red;
}

<script src="https://unpkg.com/v-stylish@1.0.0/dist/vStylish.umd.js"></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <button
    v-class:is-active="isActive"
    @click="toggleState">
    Toggle state
  </button>
</div>

Answer 3

<template>
  <button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">START</button>
</template>

<script>
    export default {
      data () {
        return {
            activeTab: 0
        }
      },
      methods: {
          setActiveTab(){
              let _this = this; //just for context change,
                                //this can be ignored if you make                                   //this function an arrow
                                //or bind the function
              _this.activeTab = 1;
          }
      }
    }
</script>

<style>
    .is-active{
        background-color: red;
    }
    .initial{
        background-color: purple;
    }
</style>

Это просто потому, что ваш начальный класс всегда устанавливается независимо и заменяет стилизацию активного класса.в приведенном выше коде начальный класс устанавливается только тогда, когда активная вкладка не == 1;таким образом, позволяя классу is-active вступать в силу, когда выполняется необходимое условие.

Существуют также другие способы достижения динамических классов в vue: динамические классы vue docs

Answer 4

Я привожу пример, подобный вашему, он работает нормально, я думаю, что свойство activeTab является строкой, и когда вы пытаетесь использовать строгое равенство, которое возвращает false

   <button class="initial" :class="{'is-active': activeTab === 1}" name="button" @click="activeTab=1">START</button>

, проверьте это:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    activeTab: 0
  },
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />



<div id="app" class="container">

  <button   class="btn" :class="{'btn-primary':activeTab===1}" @click="activeTab=1">START</button>


</div>