How can I hide Card element with v-if in Vue.js

How do I hide the Card when I select the third element of the select box? Can Anybody help me about this problem. I’m so new developer I’m so sorry.

<b-form-select 
        v-model="InputRatingPlate.RatingPlateTemplate"
        class="mb-0 input_with_appended_unit2"
        label-cols-lg="6"
              >
          <option>
            UK-Double Voltage
          </option>
          <option>
            ORCHESTRA
          </option>
          <option>
            VESTAS
          </option>
          </b-form-select>
      </b-form-group>
<b-card class="electric-card" 
   v-if=""
 >

Answer

Try like following snippet :

new Vue({
  el: '#demo',
  data() {
    return {
      options: ['UK-Double Voltage', 'ORCHESTRA', 'VESTAS'],
      InputRatingPlate: {
        RatingPlateTemplate: ''
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <b-form-group>
    <b-form-select v-model="InputRatingPlate.RatingPlateTemplate">
        <option v-for="(opt , i) in options" :key="i">
          {{ opt }}
        </option>
      </b-form-select>
    </b-form-group>
  <b-card v-if="InputRatingPlate.RatingPlateTemplate !== options[2]">
    card
  </b-card>
</div>

Advertisement

Answer