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.
JavaScript
x
19
19
1
<b-form-select
2
v-model="InputRatingPlate.RatingPlateTemplate"
3
class="mb-0 input_with_appended_unit2"
4
label-cols-lg="6"
5
>
6
<option>
7
UK-Double Voltage
8
</option>
9
<option>
10
ORCHESTRA
11
</option>
12
<option>
13
VESTAS
14
</option>
15
</b-form-select>
16
</b-form-group>
17
<b-card class="electric-card"
18
v-if=""
19
>
Advertisement
Answer
Try like following snippet :
JavaScript
1
11
11
1
new Vue({
2
el: '#demo',
3
data() {
4
return {
5
options: ['UK-Double Voltage', 'ORCHESTRA', 'VESTAS'],
6
InputRatingPlate: {
7
RatingPlateTemplate: ''
8
}
9
}
10
}
11
})
JavaScript
1
16
16
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
2
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
3
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
4
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
5
<div id="demo">
6
<b-form-group>
7
<b-form-select v-model="InputRatingPlate.RatingPlateTemplate">
8
<option v-for="(opt , i) in options" :key="i">
9
{{ opt }}
10
</option>
11
</b-form-select>
12
</b-form-group>
13
<b-card v-if="InputRatingPlate.RatingPlateTemplate !== options[2]">
14
card
15
</b-card>
16
</div>