Vue JS - Uso di v-se con i componenti

Question

Utilizzo componenti VueJS per creare una tabella dei prezzi dinamica. Uno degli elementi più "statici" è un'etichetta "più popolare" che viene aggiunta al piano Team. Voglio essere in grado di utilizzare v-se per visualizzare un e aggiungere una classe extra sul piano contrassegnato come più popolare. Ho semplificato il codice per brevità.

Si può vedere che ho provato diversi modi di formattare l'espressione (attualmente differisce tra v-bind e v-if) ma non sono sicuro che questo approccio sia possibile.

Ecco l'HTML.

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

      <plan-component : 
          name="Recreational" 
          most-popular=false 
      ></plan-component> 

      <plan-component : 
          name="Team" 
          most-popular=true 
      ></plan-component> 

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

      <template id="plan-component"> 
      <li v-bind:class="{ 'most-popular': mostPopular == true }"> 
       <template v-if="most-popular === true"> 
       <span class="popular-plan-label">Most popular</span> 
       </template> 
       <p>{{ name }}</p> 
      </li> 
      </template> 
</div> 

Ed ecco il JS.

Answer 1

È necessario convalidare il tipo mostPopular proprietà, dal momento che è Boolean non funzionerà quando si posiziona most-popular=true perché è considerato come una stringa "true" non true invece mettere most-popular tag su unico piano popolare. Ecco ad esempio:

Vue.component('plan-component', { 
 
    template: '#plan-component', 
 
    props: { 
 
     name: String, 
 
     mostPopular: { 
 
      type: Boolean, 
 
      default: false, 
 
     } 
 
    }, 
 
}); 
 

 
new Vue({ 
 
    el: '#app' 
 
});

<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" most-popular></plan-component> 
 
     
 
     <plan-component name="Club"></plan-component> 
 
    </ul> 
 
</div> 
 

 
<template id="plan-component"> 
 
    <li v-bind:class="{ 'most-popular': mostPopular }"> 
 
     <p>{{ name }} <small v-if="mostPopular" class="popular-plan-label" style="color: red">Most popular</small></p> 
 
    </li> 
 
</template>

Answer 2

Utilizzare <template v-if="ok"> per il rendering condizionale.