Level 61
You can not pass values from Javascript to already rendered blade template. Server first renders the blade and serves it to the browser, and only then the Javascript gets to work.
Dec 4, 2020
7
Level 12
Passing an alpine.js value to a blade component attribute
Hi! I'm new to Laravel and I wanted to make a blade component. The blade component receives a custom attribute. Basically, the component is working. But it won't work anymore if I fill the custom attribute with an alpine.js value.
<!-- resources/views/example.blade.php -->
<div x-data="{
myvalue1: 'hello',
myvalue2: {
mysubvalue1: 'foo',
mysubvalue2: 'bar'
}
}">
<div x-text="myvalue1"></div>
<div x-text="myvalue2.mysubvalue1"></div>
<div x-text="myvalue2.mysubvalue2"></div>
<x-example-comp valuethrough="a new value is given">My slot goes here !</x-example-comp>
<x-example-comp valuethrough="somethn else"></x-example-comp>
<!--- The problem is with the next line -->
<x-example-comp :valuethrough="myvalue1"></x-example-comp>
</div>
And here is the component:
<!-- resources/views/components/example-comp.blade.php -->
@props([
'valuethrough'=>'nothing'
])
<div>
Something new here.
<div>{{$slot}}</div>
<div>{{$valuethrough}}</div>
</div>
I know there are "conflict" with the blade component (using x- as prefix) and alpine.js. So, my main question is how is the best way to handle this, just passing an alpine.js javascript value (string or even better, an object) to a blade component attribute.
Thanks for your help, Basil
Level 12
So what's the best way to achieve something similar ? Using livewire ?
Maybe I should explain what I'm doing to be more clear :) I'm writing a webpage that generates an analysis of a math function (not sure of the English name, as I'm usually speaking french).
Basically, it creates 'sign' tables for a simple math function and for a delta function using javascript. The data for each table is stored in an array.
I'm displaying the data in a html table, formatted using tailwindcss: one table for the main function, one table for the delta function. But both html table layout shares the same code, except the data array.
So I thought it was a good idea to create a blade component that would create the table with all the tailwindcss styling and then using alpine.js to fill it. Actually, without the blade component, it's working: I copy/paste the table code and juste changed the data array name in the second table code.
But, to learn and to make the table reusable, I wanted to make it as a component.
If you want to check actual website: https://beta.scolcours.ch/maths/etude-de-fonctions (and yes, it's in french - just click on "Afficher les détails" to see the two tables completeley rendered)
Level 61
Yeah, then probably Livewire is what you need. All depends on your skill level. Also you can create API route and use AJAX to send data to it.
1 like
Level 12
I solved the problem slightly differently. You mentioned that it was already rendered - this gave me an idea. I passed to the component blade attribute the variable name as a string. In the component file, I used the blade "mustaches" to write the variable name in the rendered component.
Maybe not the best solution, but at least, it allows me to have a reusable signs table :)
Level 61
Great. Sometimes we just need a nudge in the right direction.
Level 1
Hello!
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (::) prefix to inform Blade that the attribute is not a PHP expression. For example, given the following component:
<x-button ::class="{ danger: isDeleting }"> Submit </x-button>
The following HTML will be rendered by Blade:
<button :class="{ danger: isDeleting }"> Submit </button>
7 likes
Level 5
I have used full syntax and it start working for me.
<x-button x-bind:class="{ danger: isDeleting }"> Submit </x-button>
Please or to participate in this conversation.