Vue JS – Using v-if with components

Question

I'm using VueJS components to create a dynamic pricing table. One of the more 'static' elements is a 'most popular' label which is added to the Team plan. I want to be able to use v-if to display a and add an extra class on the plan marked as most popular. I've simplified the code for brevity.

You can see I have tried multiple ways of formatting the expression (currently differs between the v-bind and the v-if) but I'm not sure if this approach is even possible.

Here is the 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>

And here is the JS.

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

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

    });

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

Answer 1

You need to validate the mostPopular property type, since it's Boolean it won't work when you place most-popular=true because it's considered as a string "true" not true instead put most-popular tag on popular plan only. Here is example:

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>