I have a v-if condition
that fails if a state
is undefined
. The state is nested and pretty large (10k+ entries) and might take time to be constructed. A state’s subitem
[0].expand
of boolean
type has to be checked in order to pass the v-if condition:
v-if="
// condition required to prevent index [0] from failing
(state.priceClassData[type]
? state.priceClassData[type][0].expand
: false)
"
I’ve been trying to refactor this into something more human-readable. In production there are multiple such condition checks in one ternary operator and I am trying to find a way to replace it.
The easiest thing I thought would be to use the ?
defined
operator on state.priceClassData.type?
but as you can see, type
in my case is a key
and has to be called like so:
state.priceClassData[type][0]
I’ve not found a way to apply ?
here. Other attempts include computed
:
const checkCondition = computed(() => {
if (state.priceClassData[type] && state.priceClassData[type][0]) {
return state.priceClassData[type][0].expand
}
return false
})
but I can’t find a way to pass the type
parameter into it, making it always return true
. I’ve also tried ordinary functions:
function checkCondition(type) {
return (state.priceClassData[type] && state.priceClassData[type][0])
? state.priceClassData[type][0].expand
: false
}
but it only seems to be executed initially, returning false
and never run again.
I’ve also tried combining functions and computed:
const checkCondition = (type) => computed(() => {
return (state.priceClassData[type] && state.priceClassData[type][0])
? state.priceClassData[type][0].expand
: false;
}
which always returns true or:
const checkCondition = computed({
get() {
return state.priceClassData
},
set() {
return (state.priceClassData[type] && state.priceClassData[type][0])
? state.priceClassData[type][0].expand
: false;
}
})
which doesn’t seem to accept the syntax.