Combine x-show & x-text toggle in alpine.js

Question

I am new to alpine.js and i need to toggle the innerText of an element, does anyone know ho can i combine showing an element and changing the innerText of another element? here is my code

<div x-data="{ numOrder: false, delNumOrder: 'Remove your order number' }">
  <button x-on:click="numOrder = !numOrder">
  Insert your order number</button>
  <input x-show="numOrder" type="text" placeholder="Order Number">
</div>

I need to overide the button text by delNumOrder, i have tried using x-text :

<button x-on:click="numOrder = !numOrder" x-text="delNumOrder = !delNumOrder">

Can i use something like ?

<div x-data="{ numOrder: false, delNumOrder = delNumOrder ? 'Insert your order number' : 'Remove your order number' }"></div>

Hugo · Accepted Answer · 2020-09-18 11:20:01Z

11

You can use an expression inside of x-text, in this case the ternary for the text: numOrder ? 'Remove your order number': 'Insert your order number'. You probably want to do something like the following:

<div x-data="{ numOrder: false }">
  <button
    x-on:click="numOrder = !numOrder"
    x-text="numOrder ? 'Remove your order number': 'Insert your order number'"
  ></button>
  <input x-show="numOrder" type="text" placeholder="Order Number">
</div>

answered Sep 18, 2020 at 11:20

Hugo

3,9381 gold badge21 silver badges32 bronze badges

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

2 Comments

Elchy Over a year ago

Yep, exactly ;-)

Dani Amsalem Over a year ago

Just a note, ternary statements work best with boolean values or explicit truthy/falsy values. I was checking whether an empty object was falsy and it wasn't working because [] and {} are both truthy as outlined here developer.mozilla.org/en-US/docs/Glossary/Truthy

Collectives™ on Stack Overflow

Combine x-show & x-text toggle in alpine.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related