toggle an equation

[fredbouin]

how would I toggle an addition/subtraction?

I was trying something like:

<div x-data="{ value: 20, diff: 5 }">
    <button 
    @click="value = ! value"
     x-text="value ? value : value += diff">
    </button>
</div>

I want to see the x-text toggle from 20 to 25. This isn't working but I think it expresses what I'm trying to do.

[SimoTod]

The closest thing to your initial example is probably

<div x-data="{ value: 20, diff: 5, add: false }">
    <button @click="add = ! add" x-text="value + (add ? diff : 0)"></button>  
</div>

In a nutshell, you need a control flag, you can't use the variable holding the value as a boolean.

If you need to update value, instead of just showing it, you can use something like

<div x-data="{ value: 20, diff: 5, added: false }">
    <button @click="value +=  (added ? (diff * -1) : diff); added = ! added" x-text="value"></button>  
</div> 

[fredbouin]

@SimoTod that makes a lot of sense, thanks for taking the time, the help is much appreciated!

I'm gonna dare to expand my question a bit, I'm struggling with what I thought would be within my skill level but I just keep hitting a wall.

I actually have multiple buttons that should toggle the price, click on "medium" add 5 or click on "large" add 10.

As is, if I click on medium I modify price to 25 so if I click on large I get 35. How can I make it so the addition is performed on the original price to get 30 and not 35? (i.e. initial price = 20, medium = 25, large = 30 )

<div x-data="{
  medium: 5, 
  large: 10, 
  price: 20,
  added: false,
  }">
  <button @click="price +=  (added ? (medium * -1) : medium); added = ! added">medium</button>
  <button @click="price +=  (added ? (large * -1) : large); added = ! added">large</button>
   <span x-text="price"></span>
</div>

[SimoTod]

In that case, i would do something different and use a computed property. Something like

<div x-data="{
  base: 20, 
  options: {
    small: 0
    medium: 5,
    large: 10
  },
  get price() {
    return this.base + this.options[this.option]
  },
  option: 'small'
}">
    <button @click="option = (option != 'medium') ? 'medium' : 'small' " :class="{selected: option == 'medium'}">medium</button>
    <button @click="option = (option != 'large') ? 'large' : 'small'" :class="{selected: option == 'large'}">large</button>
    <span x-text="price"></span>
</div>

[fredbouin]

I ended up simplifying and writing it out like @click="option = 'medium'" instead of @click="option = (option != 'medium') ? 'medium' : 'small'" since I guess in the end there isn't really a reason for toggling anymore in this scenario, anyhow this was very helpful thanks again!