Vuejs dynamicznie przełącza klasy nie działa w Laravel Blade Template

Question

Jestem początkującym w VueJs i jako próbuję wdrożyć podstawowe funkcje klasy toggle przy użyciu v-bind właściwość VueJs w moim projekcie Laravel. Nie uzyskuję wartości zmiennej className podczas renderowania strony. Proszę wskazać mi, gdzie robię źle. Kod jest podany poniżej:

<div id="root"> 
    <button type="button" v-bind:class="{'className':isLoading}" v-on:click="toggleClass">Toggle Me</button> 
</div> 

JavaScript jest:

<script> 
    var app = new Vue({ 
     el: '#root', 
     data: { 
      className:"color-red", 
      isLoading:false 
     }, 
     methods:{ 
      toggleClass(){ 
       this.isLoading=true; 
       this.className="color-blue"; 
      } 
     } 
    }) 
</script> 

Style:

<style> 
    .color-red{ 
     background-color:red; 
    } 
    .color-blue{ 
     background-color:blue; 
    } 
</style> 

Answer 1

Nie można mieć className jak również nazwy zmiennej, jak vue oczekuje go jako aktualna klasa CSS, documentation sugeruje jeszcze jeden sposób, ma obiekt klasy podobny do:

<script> 
    var app = new Vue({ 
     el: '#root', 
     data: { 
      classObj:{ "color-red" : true } , 
      isLoading:false 
     }, 
     methods:{ 
      toggleClass(){ 
       this.isLoading=true; 
       this.classObj = { "color-blue" : true}; 
      } 
     } 
    }) 
</script> 


<div id="root"> 
    <button type="button" v-bind:class="classObj" v-on:click="toggleClass">Toggle Me</button> 
</div> 

Answer 2

Nieznacznie mieszasz swoje podejście. Głównym problemem jest v-bind:class="{'className':isLoading}". Ta dyrektywa, tak jak ją napisałeś, przełącza klasę o nazwie "className" (dosłownie to, nie wartość zmiennej className) na twój element, jeśli isLoading jest . Jeśli jest to false, nie przypisuje żadnej klasy.

Wygląda na to, że próbujesz ustawić dwie różne klasy w zależności od wartości isLoading. Najprostszym sposobem na to byłoby użycie v-bind:class="isLoading ? 'color-red' : 'color-blue". Rzuć okiem na działający przykład: here.

Jeszcze lepszym rozwiązaniem, które nie zanieczyszcza szablonu za pomocą logiki, jest przeniesienie tego wyrażenia do wyliczonej właściwości, like this.