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

Question

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?

Penny Liu · Accepted Answer · 2023-02-26 15:20:44Z

3

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.

edited Feb 26, 2023 at 15:20

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Apr 20, 2022 at 4:01

mo3n

1,9103 gold badges15 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Katie Over a year ago

Hmm, I'm not sure if this will work for me. Multiplier is a text entry field. For some options it's disabled and there is a job summary where I display their form info before they click submit. If the Multiplier is disabled I want it to display N/A. I don't think a computed property is what I want here.

mo3n Over a year ago

@KLG52486 Then I think you can use watchers instead of computed property. take a look at the documentations here

Katie Over a year ago

Thanks- that's exactly what I needed. "When new simulator is selected, change stuff." I had seen something about watchers but I didn't really understand it so it didn't occur to me.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related