Checking on value in selection field - change status of disabled-CodePudding

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>

CodePudding user response：

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>