Vuejs dinamik olarak geçiş yapıyor sınıf Laravel içinde çalışmıyor Blade Şablonu

Question

VueJs'de acem oldum ve Laravel projemde VueJs'in v-bind özelliğini kullanarak temel geçiş sınıfı işlevini uygulamaya çalışıyorum. Sayfanın oluşturulması sırasında className değişkeninin değerini alamıyorum. Lütfen bana yanlış yaptığım yerde yol göster. Kod aşağıda verilmiştir:

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

JavaScript geçerli:

<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

Siz de className olamaz değişken adı olarak, vue olarak beklediği gibi gerçek CSS sınıfı, documentation bir tane daha yolu önerir, aşağıdaki gibi sınıf nesnesine sahip olabilirsiniz:

<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

Yaklaşımlarınızı biraz karıştırıyorsunuz. Ana sorun, v-bind:class="{'className':isLoading}". Bu yönerge, yazdığınız yolla,true ise "className" (tam olarak className değişkeninin değeri değil) öğenize bir sınıf değiştirir. false ise, herhangi bir sınıf atamaz.

Kodunuza bakarak, aslında isLoading değerinin ne olduğuna bağlı olarak iki farklı sınıf ayarlamaya çalıştığınız anlaşılıyor. Bunu yapmanın en kolay yolu v-bind:class="isLoading ? 'color-red' : 'color-blue"'u kullanmak olacaktır. Çalışan bir örneğe bakın here.

Şablonunuzu mantıkla kirletmeyen daha da iyi bir çözüm, bu ifadeyi hesaplanmış bir özelliğe (like this) taşımaktır.