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=""
>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>