javascript - 如何使用 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>

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

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

基本上，当我查看 时控制台日志 ，它正在工作的条件。当我想禁用一个元素时，它会打印“ disabled”。
但我的残疾人不工作。当我在我面前检查我的 a-select 时，什么也没发生

当我在做

check_function(id) {
  return "disabled"
},

我选择的所有元素都被禁用。
那么，为什么它不适用于第一种方式？

Answer 1

不是答案，而是一些调试技巧
检查保存是否为空。
这将有助于确保至少您不会错过 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"
}