VuejsクラスがLaravel Bladeテンプレートで動的にトグルしていません

Question

私はVueJsの初心者です.LaravelプロジェクトでVueJsのv-bindプロパティを使用して基本的なトグルクラス機能を実装しようとしています。私は変数classNameの値をページのレンダリング中に得ていません。私が間違っているところで私を案内してください。コードは以下の通りである：

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

JavaScriptのである：

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

スタイルは次のとおりです。

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

Answer 1

VUEのようにそれを期待してあなたがclassNameと同様に、変数名を持つことはできません実際のCSSクラスdocumentationはもう1つの方法を提案し、次のようなクラスオブジェクトを持ちます：

<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

あなたは少しアプローチを混ぜています。主な問題はv-bind:class="{'className':isLoading}"です。この指示文は、あなたが書き込んだ方法で、がtrueの場合、要素に"className"という名前の変数（文字通り変数classNameの値ではない）を要素にトグルします。 falseの場合は、クラスを割り当てません。

コードを見ると、実際にはisLoadingの値に応じて2つの異なるクラスを設定しようとしているようです。これを行う最も簡単な方法は、v-bind:class="isLoading ? 'color-red' : 'color-blue"を使用することです。作業例hereを見てください。

ロジックを使用してテンプレートを汚染しないさらに優れたソリューションは、その式を計算されたプロパティlike thisに移動することです。