अगर मैं हेडर घटक के अंदर बटन पर क्लिक करता हूं तो मैं कक्षा को शरीर या मूल तत्व ("# ऐप") में टॉगल करना चाहता हूं

हैडर.व्यू :

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" @click="collapedSidebar">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    collapedSidebar() {

    }
  }
}
</script>

ऐप.व्यू :

<template lang="html">
  <div id="app" :class="{ active: isActive }">
   ...
  </div>
</template>

! अगर मैं गलत दिशा में हूं तो कृपया मुझे सुधारें। मैं Vuejs में नया हूँ :)

0
Fabul 19 पद 2018, 09:41

3 जवाब

सबसे बढ़िया उत्तर

आप अपने हेडर के अंदर एक ईवेंट उत्सर्जित कर सकते हैं और शायद इसे ऐप घटक के घुड़सवार में पकड़ सकते हैं:

आपके साइडबार या अन्य घटक में:

on_some_btn_click: function (){

    this.$emit('toggle_root_class');

}

आपके ऐप घटक में:

mounted: function(){

    var _this = this;

    this.$on('toggle_root_class', function(){
             _this.active = !_this.active;
    });

}

Vue घटना को सहोदर घटकों में देखे जाने से प्रतिबंधित कर सकता है। इसलिए मैं आसानी से ईवेंट भेजने को संभालने के लिए अपनी परियोजनाओं में EventBus का उपयोग करता हूं।

2
Waleed 19 पद 2018, 10:01

समस्या आपके घटक दायरे में है। आपने App.vue में Header.vue में डेटा एक्सेस करने का प्रयास किया जो आपके कोड में दिखाई गई संरचना से असंभव है। isActive डेटा को App.vue पर ले जाने पर विचार करें या Vuex का उपयोग करें।

2
Eric Marcelino 19 पद 2018, 09:56

आप वर्ग को टॉगल करने के लिए jQuery का उपयोग किसी ऐसे तत्व के लिए कर सकते हैं जो Vue टेम्पलेट के अंदर नहीं है। आप एक बटन के क्लिक पर एक फ़ंक्शन को कॉल कर सकते हैं और इसके अंदर, आप jQuery का उपयोग करके बॉडी टैग में क्लास को टॉगल कर सकते हैं।

<template lang="html">
 <header>
  <button class="navbar-toggler navbar-toggler align-self-center" type="button" :class="{ active: isActive }" @click="activeLink">
  <span class="mdi mdi-menu"></span>
  </button>
 </header>
</template>

<script>
export default {
  name: 'app-header',
  data: {
    isActive: false
  },
  methods: {
    activeLink() {
         $('body').toggleClass('.class-name');
    }
  }
}
</script>
0
joy 19 पद 2018, 09:49