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

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

CodePudding user response：

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.