Tengo los siguientes elementos b-form-select. Intento hacer lo siguiente:
Input Info 2 + Input Info 3 debe desactivarse primero. Cuando selecciono algo en Información de entrada 1, debería poder seleccionar algo en Información de entrada 2 y si hago mi selección allí también debería poder seleccionar algo en el campo de Entrada 3.
Pero no se exactamente como hacerlo..
Gracias de antemano por tu ayuda !
<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>Intente como el siguiente fragmento (verifique si input1/input2 está vacío y luego habilítelo):
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>