Vue JS - Sử dụng v-if với các thành phần

Question

Tôi đang sử dụng các thành phần VueJS để tạo bảng giá động. Một trong những yếu tố 'tĩnh' là nhãn 'phổ biến nhất' được thêm vào kế hoạch nhóm. Tôi muốn có thể sử dụng v-if để hiển thị và thêm một lớp phụ vào kế hoạch được đánh dấu là phổ biến nhất. Tôi đã đơn giản hóa mã cho ngắn gọn.

Bạn có thể thấy tôi đã thử nhiều cách định dạng biểu thức (hiện khác nhau giữa v-bind và v-if) nhưng tôi không chắc liệu phương pháp này có thể thực hiện được hay không.

Đây 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> 

Và đây là JS.

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

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

    }); 

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

Answer 1

Bạn cần phải xác nhận các loại mostPopular bất động sản, vì nó Boolean nó sẽ không hoạt động khi bạn đặt most-popular=true vì nó được xem như là một chuỗi "true" không true thay vì đưa most-popular thẻ trên chỉ kế hoạch phổ biến. Dưới đây là ví dụ:

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

Sử dụng <template v-if="ok"> để hiển thị có điều kiện.