如何根据选择下拉项禁用文本框？答案

【问题标题】：How to disable a text box based on a select dropdown item?如何根据选择下拉项禁用文本框？
【发布时间】：2019-07-04 15:07:26
【问题描述】：

本质上，我想要一个位于默认禁用的文本输入字段旁边的下拉菜单（或组合框）。我希望能够在选择下拉列表中的特定属性时启用文本字段。

我想我的主要问题是我有一个 input_disabled 值，我不知道如何根据选择的属性动态更改它。

这是我拥有的相关 HTML 的一部分。

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

...

以及 VueJS 使用的数据部分的一部分

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.我的问题是我不知道如何更改input_disabled。

【问题讨论】：

标签： javascript vue.js data-binding

【解决方案1】：

Vuejs 提供了计算属性，这正是你所需要的，计算属性的值是动态设置的，这样做：

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

对 data.properties[3] 的每次更新都会触发这个计算并更新 input_disabled 值。如果你使用这个，不要在你的数据上声明 input_disabled，计算包含这个变量给你；

【讨论】：

【解决方案2】：

您将数据设置为这样（将 setState 替换为您用于设置数据的 watever 函数）：

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

【讨论】：