मेरे पास आइकनों के साथ निचला नेवबार है। जब राउटर-लिंक में 'सक्रिय' वर्ग होगा तो यह एक सक्रिय आइकन में कैसे बदल जाएगा? डिफ़ॉल्ट आइकन 1 सक्रिय है।

  <li>
   <router-link v-if="active" :class="{active}" active-class="active">
      Icon 1 active
    </router-link>
    <router-link v-if="!active" :class="{active}" active-class="active">
      Icon 1
    </router-link>
  </li>
  <li>
   <router-link v-if="active" :class="{active}" active-class="active">
      Icon 2 active
    </router-link>
    <router-link v-if="!active" :class="{active}" active-class="active">
      Icon 2
    </router-link>
  </li>
  <li>
   <router-link v-if="active" :class="{active}" active-class="active">
      Icon 3 active
    </router-link>
    <router-link v-if="!active" :class="{active}" active-class="active">
      Icon 3
    </router-link>
  </li>
-1
Phúc Trần 28 सितंबर 2021, 16:02
यह स्पष्ट नहीं है कि आप क्या पूछ रहे हैं।
 – 
RoToRa
28 सितंबर 2021, 18:08
कृपया अपनी विशिष्ट समस्या को स्पष्ट करें या आपको जो चाहिए उसे ठीक से उजागर करने के लिए अतिरिक्त विवरण प्रदान करें। जैसा कि वर्तमान में लिखा गया है, यह बताना कठिन है कि आप क्या पूछ रहे हैं।
 – 
Community
6 अक्टूबर 2021, 18:17

1 उत्तर

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

समाधान:

HTML वर्ग को बांधना:

  <li>
    <router-link @click="isActive1 = true" :class="{ active: isActive1 }">
      Icon 1
    </router-link>
  </li>
  <li>
    <router-link @click="isActive2 = true" :class="{ active: isActive2 }">
      Icon 2
    </router-link>
  </li>
  <li>
    <router-link @click="isActive3 = true" :class="{ active: isActive3 }">
      Icon 3 Active
    </router-link>
  </li>

सक्रिय है चर लागू करें:

data: {
   isActive1: true, // default icon1 
   isActive2: false,
   isActive3: false,
 }

और दर्शक लागू करें:

watch: {
  isActive1(val) {
    if(val === true) {
      this.isActive2 = false
      this.isActive3 = false
    }
  },
  isActive2(val) {
    if(val === true) {
      this.isActive1 = false
      this.isActive3 = false
    }
  },
  isActive3(val) {
    if(val === true) {
      this.isActive1 = false
      this.isActive2 = false
    }
  }
}

दस्तावेज़ीकरण: https://vuejs.org/v2/guide/class-and- style.html

0
Márk Varga 28 सितंबर 2021, 18:29