Vue JS - Bileşenlerle v-if kullanarak

Question

Dinamik bir fiyat tablosu oluşturmak için VueJS bileşenlerini kullanıyorum. Daha 'statik' elemanlardan biri, Ekip planına eklenen 'en popüler' bir etikettir. En popüler olarak işaretlenmiş plana ek bir sınıf eklemek ve eklemek için v-if kullanabilmek istiyorum. Kısaltmanın kodunu sadeleştirdim.

İfadeyi biçimlendirmenin birçok yolunu denediğimi görebilirsiniz (şu anda v-bind ile v-if arasında farklılık gösterir) ancak bu yaklaşımın mümkün olup olmadığından emin değilim.

İşte 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> 

Ve işte burada JS.

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

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

    }); 

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

Answer 1

Bunu "true" yerine popüler planı yalnızca most-popular etiketi koymak true bir dize olarak kabul edilir çünkü most-popular=true yerleştirdiğinizde işe yaramaz, mostPopular özellik türünü doğrulamak gerekir.

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

koşullu render için kullanın <template v-if="ok">. o Boolean beri