检查选择字段中的值 - 更改禁用状态

Question

我有以下 b-form-select 元素。我尝试执行以下操作：

Input Info 2 + Input Info 3 应首先禁用。当我在输入信息 1 中 select 一些东西时，我应该能够在输入信息 2 中 select 一些东西，如果我也在那里制作我的 selection，我应该能够 select 输入字段 3 中的内容。

但我不知道具体怎么做..

在此先感谢您的帮助！

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

Answer 1

像下面的片段一样尝试（检查 input1/input2 是否为空然后启用）：

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>

检查选择字段中的值 - 更改禁用状态

Checking on value in selection field - change status of disabled

javascript

disabled-input

vue.js

vuejs2

bootstrap-vue