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

Question

I'm trying to disable a specific element of a a-select. And for that, i have a function "check_function" and i'm returning the string "disabled" when i want to disable an element. I have

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

I want to disable an element of my a-select when the function "check_function" is returning "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"
  }
},

And basically, when i'm checking with console.log, the condition it's working. When i want to disable a element, it's printing "disabled".

But my disabled is not working. When i'm cheking my a-select in my front, nothing is happening

When i'm doing

check_function(id) {
  return "disabled"
},

All the elements of my select are disabled.

So, why it's not working with the first way ?

Answer 1

Not an answer but some tips to debug

Check whether save is null. This would help ensure at least you're not missing the if check because your "save" variable is undefined or null.

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

Check whether it's returning null before it goes to your if check. This should by right disable all. If it doesn't then it's a problem

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