CODEWITHSUNDEEP
javascriptvue.jsdata-binding
davechester
davechester

Reputation: 99

How to disable a text box based on a select dropdown item?

Essentially I want a dropdown (or combobox) that is next to a text input field that is disabled by default. I want to be able to enable the text field when a specific property from the dropdown is selected.

My main problem I guess is that I have an input_disabled value that I don't know how to change dynamically based off what property has been selected.

Here's a portion of the relative HTML I have. 

<template>
<v-container class="my-1 mx-5">
    <form>
    <v-select
      v-model="select_property"
      :properties="properties"
      label="properties"
      @change="$v.select_property.$touch()"
      @blur="$v.select_property.$touch()"
    ></v-select>

    <v-text-field
      v-model="custom_path"
      :error-messages="custom_pathErrors"
      :disabled="input_disabled"
      label="Custom Property Path"
      @input="$v.name.$touch()"
      @blur="$v.name.$touch()"
    ></v-text-field>

...

and a portion of the data section that VueJS uses 

data: () => ({
    input_disabled: true,
    properties:[
      'Prop1',
      'Prop2',
      'Prop3',
      'Prop4'
    ]
  }),

When prop4 is selected input_disabled should be set to false and the text field should now allow the user to input text without issue. The problem I have is I don't know how to change input_disabled.

Upvotes: 0

Views: 791

Answers (2)

Julliano Osorio
Julliano Osorio

Reputation: 305

Vuejs provides the computed properties, there is exactly what you need, the value of a computed properties is set dynamically, do something like this:

computed: {
    input_disabled() {
        return data.properties[3] ? false : true;
    }
}

Every update on data.properties[3] will trigger this computed and update the input_disabled value. If you use this, dont declare the input_disabled on your data, computed include this variable there for you;

Upvotes: 2

user11725421
user11725421

Reputation:

You set the data something like this (replace setState with watever function you are using to set the data):

setState({
    data: {
        input_disabled: select_property === data.properties[3] ? false : true,
    }
});

Upvotes: 0

Related Questions