如何使用 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"
},

我选择的所有元素都被禁用。

那么，为什么它不适用于第一种方式？

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