如何基於選擇下拉項禁用文本框？

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,
    }
});