我如何使用 Ant Design Vue 禁用 Select 中的特定元素？

Question

我正在尝试禁用 a-select 的特定元素。为此，我有一个函数“check_function”，当我想禁用一个元素时，我返回字符串“disabled”。我有

      <a-select @change="onTestChanged" :value="currentTestId" >
        <a-select-option 
          v-for="test in tests" v-bind:key="test.id"
          :value="test.id" 
          :disabled="check_function(test.id) == 'disabled'"
        >
          {{ test.testName }}
        </a-select-option>
      </a-select>

我想在函数“check_function”返回“disabled”时禁用 a-select 的一个元素。

async check_function(id) {
  await this.$store.dispatch("fetch_test", id)
  var save = this.$store.getters.get_test()
  if (save.length == 0) {
    console.log("disabled")
    return "disabled"
  }
},

基本上，当我使用 console.log 检查它的工作条件时。当我想禁用一个元素时，它正在打印“disabled”。

但是我的残障人士不工作。当我在面前检查我的 a-select 时，什么也没有发生

当我在做

check_function(id) {
  return "disabled"
},

我的 select 的所有元素都被禁用了。

那么，为什么第一种方式不起作用？

Answer 1

不是答案，而是一些调试技巧

检查save是否为空。这将有助于确保至少您不会错过 if 检查，因为您的“保存”变量未定义或为空。

async check_function(id) {
  await this.$store.dispatch("fetch_test", id)
  var save = this.$store.getters.get_test()
  if (!save || save.length == 0) {
    console.log("disabled")
    return "disabled"
  }
},

在进行 if 检查之前检查它是否返回 null。这应该正确地禁用所有。如果不是那就是问题

async check_function(id) {
  await this.$store.dispatch("fetch_test", id)
  return "disabled"
}

我如何使用 Ant Design Vue 禁用 Select 中的特定元素？

How can i disable a specific element in a Select with Ant Design Vue?

javascript

vue.js

antd

antdv