[Vuejs]-How to enable / disable an input with a select VueJS

by

3👍

✅

Below is a vue template file using v-model instead of combining jQuery

<template>
    <div>
        <select v-model="id_categoria">
            <option value="1" :selected="id_categoria === 1">Clientes</option>
            <option value="2" :selected="id_categoria === 2">Empresas</option>
            <option value="3" :selected="id_categoria === 3">Personas</option>
        </select>
        <input id="d" :disabled="id_categoria === 1" type="text" value="test">
    </div>
</template>
<script>
export default {
    data() {
        return {
            id_categoria: 1,
        };
    },
}
</script>
👤Michael Mano

1👍

Try this:

new Vue({
  el: "#app",
  data: {
    options: [
      { content: 'Clientes', value: 1 },
      { content: 'Empresas', value: 2 },
      { content: 'Personas', value: 3 }
    ],
    inputDisabled: true
  },
  methods: {
    onChangeSelect(e) {      
      this.inputDisabled = (e.target.value == 1)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <select @change="onChangeSelect($event)">
    <option v-for="(option, index) in options" :key="index" :value="option.value">
      {{ option.content }}
    </option>
  </select>
  <input :disabled="inputDisabled" type="text" value="test">
</div>
👤Christian Carrillo

1👍

new Vue({
  el: "#app",
  data: {
    options: [
      { content: 'Clientes', value: 1 },
      { content: 'Empresas', value: 2 },
      { content: 'Personas', value: 3}
    ],
    selectedOption: '',
  },
  computed: {
    inputDisabled() {
      return this.selectedOption === 2;
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <select v-model="selectedOption">
    <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.content }}</option>
  </select>
  
  <input :disabled="inputDisabled" type="text" v-model="selectedOption">
</div>
👤Syed

Leave a comment