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
check_function(id) {
return "disabled"
},
All the elements of my select are disabled.
So, why it's not working with the first way ?
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"
}