I have a template that is displayed based on a v-if statement. When that template is used, a certain variable needs to be set to N/A. I can't figure out how to do this. It seems like it should be so simple, but I've tried putting it in the tag with v-if like this:
<span v-if="selected==='Powergrid'" Multiplier="N/A">
I've tried curly braces, which works but I don't actually want to display the variable, I just want to set it to N/A:
<span v-if="selectedSim==='Powergrid'">
{{Multiplier = 'N/A'}}
I've tried putting it in the template:
<span v-if="selectedSim==='Powergrid'">
<powergridMenu
@Outcome="selectedOutcome = $event"
@Threshold="outcomeThreshold = $event"
Multiplier="N/A"
/>
I tried putting it in its own tag:
<span v-if="selectedSim==='Powergrid'">
<span Multiplier='N/A'></span>
I realize I can just write a method to set this variable, but it seems like I should be able to just set a variable. What am I doing wrong??
You should use a computed value, that's what it's for:
export default {
computed: {
Multiplier() {
return this.selectedSim==='Powergrid' ? 'N/A' : ''
}
}
}
Note that the code above is using options api; If you want to use composition api, read the docs about how to use computed properties in composition api.