Toggle Klasse in Vue JS

Question

Ich bin auf der Suche nach einer Klasse mit Vue JS. Ich habe The Class and Style bindings Dokumentation gelesen, aber ich kämpfe immer noch, um herauszufinden, die richtige Möglichkeit, um eine Klasse umzuschalten.

Ich habe meinen Code für die Kürze vereinfacht, aber im Wesentlichen habe ich eine Liste von 4 "Pläne", jeder mit einem Knopf, der dem Benutzer erlaubt, den Plan auszuwählen, den sie kaufen möchten. Mit dem aktuellen Code wird die aktive Klasse hinzugefügt, aber wenn Sie auf eine Schaltfläche aus einem anderen Plan klicken, bleibt die Klasse auf dem jetzt nicht aktiven Plan.

Hier ist der HTML.

<div id="app"> 
<ul class="plans"> 
     <plan-component : 
         name="Basic" 
     ></plan-component> 

     <plan-component : 
         name="Recreational" 
     ></plan-component> 

     <plan-component : 
         name="Team" 
     ></plan-component> 

     <plan-component : 
         name="Club" 
     ></plan-component> 
     </ul> 

     <template id="plan-component"> 
     <li v-bind:class="{ 'active-plan': isActive }"> 
      <h2 class="plan-name">{{ name }}</h2> 
      <a href="#" v-on:click="makeActivePlan($event)" class="select-plan button">Choose this plan</a> 
     </li> 
     </template> 
</div> 

Hier ist der JS.

Vue.component('plan-component', { 
     template: '#plan-component', 

     props: ['name', 'isActive'], 

     methods: { 
     makeActivePlan(e) { 
      // We dispatch an event setting this to become the active plan 
       e.preventDefault(); 
       this.isActive = true; 
      this.$dispatch('set-active-plan', this); 
     } 
     } 

    }); 

    new Vue({ 
     el: '#app', 
     data: { 
     activePlan: { name: 'n/a' } 
     }, 

     events: { 
     'set-active-plan': function(plan) { 
      this.activePlan = plan; 
     } 
     }, 
    }); 

Answer 1

Wenn die plan-component eng mit seinen Eltern verwandt ist, könnten Sie die $parent Eigenschaft benutzen Sie/stellen Sie den aktiven Plan:

Vue.component('plan-component', { 
 
    template: '#plan-component', 
 

 
    props: ['name'], 
 

 
    computed: { 
 
    isActive() { 
 
    \t return this.$parent.activePlan.name === this.name 
 
    } 
 
    }, 
 
    
 
    methods: { 
 
    makeActivePlan() { 
 
     this.$parent.activePlan.name = this.name 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    
 
    data: { 
 
    activePlan: { name: 'Club' } 
 
    } 
 
})

.active-plan { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <ul class="plans"> 
 
    <plan-component name="Basic"></plan-component> 
 
    <plan-component name="Recreational"></plan-component> 
 
    <plan-component name="Team"></plan-component> 
 
    <plan-component name="Club"></plan-component> 
 
    </ul> 
 

 
    <template id="plan-component"> 
 
    <li :class="{ 'active-plan': isActive }" @click.prevent="makeActivePlan"> 
 
     <h2 class="plan-name">{{ name }}</h2> 
 
    </li> 
 
    </template> 
 
</div>

Answer 2

Wenn Sie Ereignisse verwenden Um Flexibilität und Wiederverwendbarkeit beizubehalten, könnte ein anderer Ansatz wie folgt sein:

Vue.component('plan-component', { 
 
    template:'#plan-component', 
 
    props:['name', 'isActive'], 
 
    methods:{ 
 
\t makeActivePlan(){ 
 
\t  this.$dispatch('set-active-plan', this.name); 
 
\t } 
 
    } 
 
}); 
 

 
new Vue({ 
 
\t el:'#app', 
 
\t events:{ 
 
      'set-active-plan'(name){ 
 
\t \t this.setActivePlan(name) 
 
\t  } 
 
\t } 
 
\t data(){ 
 
\t  return{ 
 
\t \t planOptions:[ 
 
\t \t  {name:'Basic', isActive:true}, 
 
\t \t  {name:'Recreational', isActive:false}, 
 
\t \t  {name:'Team', isActive:false}, 
 
\t \t  {name:'Club', isActive:false} 
 
\t \t ] 
 
\t  } 
 
\t }, 
 
\t methods:{ 
 
\t  setActivePlan(name){ 
 
\t   this.planOptions.forEach(plan => { 
 
\t \t  plan.isActive = false; 
 
\t \t  if(plan.name === name){ 
 
\t \t   plan.isActive = true 
 
\t \t  } 
 
\t   }); 
 
\t  } 
 
\t } 
 
});

Dann würde der html sein:

<div id='app'> 
 
    <ul class="plans"> 
 
\t <plan-component 
 
\t  v-for="plan in planOptions" 
 
\t  :name="plan.name" 
 
\t  :isActive="plan.isActive" 
 
\t ></plan-component> 
 
    </ul> 
 
\t 
 
\t <template id="plan-component"> 
 
     <li :class="{ isActive: 'active-plan' }" @click.prevent="makeActivePlan"> 
 
      <h2 class="plan-name">{{ name }}</h2> 
 
     </li> 
 
     </template> 
 
</div>

ich den Code nicht getestet, aber es sollte wie vorgesehen. Wenn Sie irgendwelche Schwierigkeiten haben, schreiben Sie hier einen Kommentar und ich werde versuchen zu helfen.