Question

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

我想我的主要问题是我有一个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'
    ]
  }),

当选择prop4时，input_disabled应设置为false，并且文本字段现在应允许用户输入文本而不会出现问题。我的问题是我不知道如何更改input_disabled。

Answer 1

Vuejs提供了计算属性，正是您需要的，计算属性的值是动态设置的，执行以下操作：

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

对data.properties [3]的每次更新都将触发此计算并更新input_disabled值。如果您使用此选项，请不要在数据上声明input_disabled，而应在其中为您计算出包含此变量的值；

Answer 2

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

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

如何基于选择下拉菜单项禁用文本框？

2 个答案: