Vue JS - Klasse dynamisch zu einem Element hinzufügen und dann Klasse zu Geschwistern entfernen

Question

Ich bin neu in der Verwendung von Vue.

Ich habe eine JS wie folgt aus:

var app = new Vue({ 
    el: '#app', 
    data: { 
     nav1: true, 
     nav2: false, 
     nav3: false 
    }, 
    methods: { 
     activatedThis: function(n){ 
      if(n === 'nav2') 
      { 
       this.nav1 = false; 
       this.nav3 = false; 
       this.nav2 = true; 
      } 
      else if(n === 'nav3') 
      //And so on... 
     } 
    } 
}); 

HTML

<div id="app"> 
    <h1 @click="activatedThis('nav1')" v-bind:class="{ active: nav1 }">Navigation 1</h1> 
    <h1 @click="activatedThis('nav2')" v-bind:class="{ active: nav2 }">Navigation 2</h1> 
    <h1 @click="activatedThis('nav3')" v-bind:class="{ active: nav3 }">Navigation 3</h1> 
</div> 

Ich möchte, dass meine Methode dynamisch machen .. Ich Schleife denke die this. Aber da ich noch nicht viel über Vue weiß ... Gibt es einen reinen Vue Weg dazu?

Answer 1

Sie können nur Ihren Code wie folgt ändern es prägnanter zu machen:

var app = new Vue({ 
    el: '#app', 
    data: { 
     navs: { 
      nav1: true, 
      nav2: false, 
      nav3: false 
     } 
    }, 
    methods: { 
     activatedThis: function(nav){ 
       this.navs.nav1 = nav === "nav1"; 
       this.navs.nav3 = nav === "nav2"; 
       this.navs.nav2 = nav === "nav3"; 
     } 
    } 
}); 

HTML:

<div id="app"> 
    <h1 v-for="(nav, index) in Object.keys(navs)" @click="activatedThis(nav)" v-bind:class="{ 'active': navs[nav] }">Navigation {{index}}</h1> 
</div> 

Verwandte Links:

• How to find keys of a hash?
• v-for