Level 102
How about
<div x-data="{status: '{{$status}}'">
1 like
Jul 15, 2022
8
Level 13
AlpineJS - Updating Button Text
I wish to update the button text upon click. However, for the initial load, the button status is determined by the value I have in database. Let me explain -
Blade -
<button>{{$status->active ? 'Deactivate' : 'Activate'}}</button>
Now, I'm aware that I can control this with AlpineJS as -
<div x-data="statusController">
<button x-text="status" @click="updateStatus()"></button>
</div>
<script>
function statusController() {
return {
status = 'Activate',
updateStatus() {
this.status = "Deactivate"
}
}
}
But this approach does not allow me to set the button status when the page is loaded for the first time (i.e. status determined by the value from database).
Can someone guide? Thanks!
Level 13
@Sinnbeck - right. That makes sense. I was also wondering if I should make use of x-modelable.
Level 102
@thebigk isn't that for rebinding to a model? I assume you can still do this?
Level 13
@Sinnbeck . Never used it; so don't know for sure. Is there any way out if I'm defining x-data="someFunc()"? In this case, i can't pass my blade variables to JavaScript.
Level 102
@thebigk sure you can do the same. As long as it's a blade file
<script>
function statusController() {
return {
status = '{{$status}}',
Level 13
@Sinnbeck - Does it work if my JS resides in a separate file? Is there any other way to do this?
Level 102
@thebigk only if the file has access to the variable. So you need to pass it in
Another way is to use an ajax request (axios for instance)
Level 13
@Sinnbeck Yep, ajax request. I think I'll have to fire a request right within the init(). Ok.
Please or to participate in this conversation.