Vue JS - użycie v-if z komponentami

Question

Używam komponentów VueJS do utworzenia tabeli dynamicznej wyceny. Jednym z bardziej "statycznych" elementów jest "najbardziej popularna" etykieta dodana do planu zespołu. Chcę móc używać v-if, aby wyświetlić i dodać dodatkową klasę na planie oznaczonym jako najbardziej popularny. Uprościłem kod pod kątem zwięzłości.

Możesz zobaczyć Próbowałem wiele sposobów formatowania wyrażenia (obecnie różni się między v-bind i v-if), ale nie jestem pewien, czy to podejście jest możliwe.

Oto kod 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> 

A oto JS.

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

     props: ['name', 'mostPopular'], 

    }); 

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

Answer 1

Trzeba zweryfikować typ mostPopular nieruchomości, ponieważ jest Boolean to nie będzie działać po umieszczeniu most-popular=true ponieważ jest traktowany jako ciąg "true" nie true zamiast umieścić most-popular tag tylko na popularnej planu. Oto przykład:

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

Do renderowania warunkowego służy <template v-if="ok">.