CODEWITHSUNDEEP
javascripthtmlvue.js
anon
anon

Reputation:

How to enable / disable an input with a select VueJS

Question originally posted (in Spanish) on es.stackoverflow.com by José:

I have seen the example in JavaScript, and yes, it works and everything but as I can do it in vue.js, I've been trying for a while and it does not work. Sorry for the inconvenience.

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ name }}</p>
  <input type="text" v-model="name"/>
  <button type="submit" :disabled="name == defaultName">Submit</button>
</div>

>

Javascript

    $(document).ready(function() {
  $('#id_categoria').change(function(e) {
    if ($(this).val() === "1") {
      $('#d').prop("disabled", true);
    } else {
      $('#d').prop("disabled", false);
    }
  })
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <select name='id_categoria' id='id_categoria' >
    <option value="1" selected>Clientes</option>
    <option value="2">Empresas</option>
    <option value="3">Personas</option>
  </select>
  <input id="d" disabled="disabled" type="text" value="test">
</div>

I know it's weird that I want to directly manipulate the DOM when you use Vue; I usually let the framework do that, This would be a possible solution

Of course, if it's a possibilty, you should take advantage of Vue's data-driven reactive nature, as tackling with the DOM is always tricky.

The solution would be to just create another variable and populate it on

new Vue({
  el: '#app',
  data: {
    name: 'Hello Vue.js!',
    defaultName: null
  },
  mounted() {
    this.defaultName = this.name;
  }

Upvotes: 0

Views: 7319

Answers (3)

Syed
Syed

Reputation: 16513

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/[email protected]/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>

Upvotes: 1

Christian Carrillo
Christian Carrillo

Reputation: 2761

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>

Upvotes: 1

Michael Mano
Michael Mano

Reputation: 3440

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>

Upvotes: 3

Related Questions