Vuejs गतिशील वर्ग Laravel ब्लेड खाका

Question

मैं VueJs में नौसिखिया हूँ और मैं बुनियादी टॉगल वर्ग मेरी Laravel परियोजना में VueJs के वी-बाँध संपत्ति का उपयोग कर कार्यक्षमता को लागू करने की कोशिश कर रहा हूँ के रूप में में काम नहीं कर रहा टॉगल। पेज के प्रतिपादन के दौरान मुझे परिवर्तनीय className का मान नहीं मिल रहा है। कृपया मुझे मार्गदर्शन करें जहां मैं गलत कर रहा हूं। कोड नीचे दिया गया है

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

जावास्क्रिप्ट है:

<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

आप className रूप में अच्छी तरह नहीं हो सकता एक चर नाम के रूप में, Vue के रूप में यह उम्मीद के रूप में वास्तविक सीएसएस वर्ग, documentation एक और तरीके से सुझाव देता है, क्लास ऑब्जेक्ट निम्न जैसा है:

<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}" में है। यह निर्देश, जिस तरह से आप यह लिखा था, नाम "className" के साथ एक वर्ग टॉगल (शाब्दिक कि, नहीं चर className का मूल्य) अपने तत्व के लिए अगर isLoadingtrue है। यदि यह false है, तो यह किसी भी वर्ग को असाइन नहीं करता है।

अपने कोड को देखते हुए, ऐसा लगता है कि आप वास्तव में isLoading के मूल्य के आधार पर दो अलग-अलग वर्गों को सेट करने का प्रयास कर रहे हैं। ऐसा करने का सबसे आसान तरीका v-bind:class="isLoading ? 'color-red' : 'color-blue" का उपयोग करना होगा। एक कामकाजी उदाहरण here पर एक नज़र डालें।

एक बेहतर समाधान जो आपके टेम्पलेट को तर्क के साथ प्रदूषित नहीं करता है, उस अभिव्यक्ति को एक गणना की गई संपत्ति, like this पर ले जाना है।