CODEWITHSUNDEEP
javascriptvue.js
Katie
Katie

Reputation: 31

How can I define a variable in a VueJS v-if statement without displaying it?

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

Upvotes: 1

Views: 904

Answers (1)

mo3n
mo3n

Reputation: 1870

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.

Upvotes: 3

Related Questions