I have following b-form-select elements. I try to do following:
Input Info 2 + Input Info 3 should be disabled first. When I select something in Input Info 1 than I should be able to select something in Input Info 2 and if I make my selection there as well i should be able to select something in Input field 3.
But I don't know exactly how to do that..
Thanks in advance for your help !
<div>
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 1</div>
<b-form-select v-model="id.Input1" :value="id.Input1" :options="filteredJSON1"></b-form-select>
</div>
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 2</div>
<b-form-select v-model="id.Input2" :value="id.Input2" :options="filteredJSON2" disabled="true"></b-form-select>
</div>
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 3</div>
<b-form-select v-model="id.input3" :value="id.input3" :options="filteredJSON3" disabled="true"></b-form-select>
</div>
</div>
Try like following snippet (check if input1/input2 is empty then enable):
new Vue({
el: '#demo',
data() {
return {
id: {
input1: '',
input2: '',
input3: ''
},
filteredJSON1: [1,2,3],
filteredJSON2: [1,2,3],
filteredJSON3: [1,2,3]
}
}
})<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" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 1</div>
<b-form-select v-model="id.Input1" :options="filteredJSON1"></b-form-select>
{{id.Input1}}
</div>
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 2</div>
<b-form-select v-model="id.Input2" :options="filteredJSON2" :disabled="id.Input1 ? false : true"></b-form-select>
</div>
<div class="col-md-3 ml-1 mr-1 mt-1">
<div class="mt-2">Input Info 3</div>
<b-form-select v-model="id.input3" :options="filteredJSON3" :disabled="id.Input2 ? false : true"></b-form-select>
</div>
</div>