AlpineJS inline function and Laravel #json - laravel

I have a problem passing a PHP variable to a variable inside an alpine variable or function. Here is a simple example.
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: #json($test)
}">
<span x-text="message"></span>
</div>
The problem comes from the fact that x-data is using the double-quote to wrap the encoded data. I know I could "externalize" the x-data, but I really need it to be inline.
I have a basic workaround (using backticks) for example, but I wanted to know if there is a better way to do this.
EDIT
The example is using a string... but the PHP variable can be a boolean or even an array. That's why I'm using #json.

I' d use Template Strings.. Easy to read, no need to escape multiple quotes.
<div>
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: `{{ $test }}`
}">
<span x-text="message"></span>
</div>
</div>

Will this not work?:
#php
$test = "Hello World's testing";
#endphp
<div x-data="{
message: {{ json_encode($test) }}
}">
<span x-text="message"></span>
</div>

Related

Curly brackets are appearing along with the variable name when I try to echo on laraval

When I try to echo and display the output of a query in my dashboard it is appearing like this
[{"job_type":"Sales Manager"}]
The query is this:
->where('id',$userId)
->select('job_type')
->get();
To display it on the dashboard I am using this code
<div class="col-md-6 col-lg-2 col-xlg-3">
<div class="card card-hover">
<div class="box bg-cyan text-center">
<h1 class="font-light text-white"><i class="mdi mdi-view-dashboard"></i></h1>
<h5 class="m-b-0 m-t-5 text-white">{{ $jobType }}</h5>
<h6 class="text-white">Designation</h6>
</div>
</div>
</div>
How do I just get the result instead of the variable name along with the brackets?
You can use this query
->where('id',$userId)
->pluck('job_type')
->first();
You should print it like {{$jobType->job_type}} or {{$jobType['job_type']}} based on your return type.
->where('id',$userId)
->select('job_type')
->get();
This code will return Collection instance so you should either use first(); or you iterate over the variable. You probably try to get the user so you should use it like this:
$user = User::where('id', $userId)->first();
and use below code in your view
{{ $user->job_type }}
Or you can use
$user = User::find($userId);

Laravel Components: default content in {{ slots }}

In old-style Laravel blade templated we used to use #section('section-name') in the following way:
{{-- h1para.blade.php --}}
<h1>
#section('heading')
Heading from Template
#endsection
</h1>
<p>
#yield('details')
</p>
And then extend that template with:
{{-- content.blade.php --}}
#extends('h1para')
#section('details')
Content from content page
#endsection
In the above, my rendered HTML output would look like the following, because the "missing" 'heading' section in the extending file means that we default back to the content in the template:
<h1>Heading from Template</h1>
<p>Content from content page</p>
But in the new components way of doing things, I do:
{{-- .../components/h1para.blade.php --}}
<h1>{{ $heading }}</h1>
<p>{{ $slot }}</p>
In case you haven't gathered, the question is: how do I set a default value for a slot's contents, such that if it isn't supplied in the extending component/template, it falls back to that default?
(I've done my searches, but haven't been able to find the same question asked before)
EDIT:
I should add that I've seen the solution (in the Laravel documentation):
<h1>{{ $heading ?? 'Default Heading Here' }}</h1>
But this seems only to be appropriate if the default value is a short easy to manage string. If the default is a long stream of HTML, then it wouldn't work for my needs.
EDIT 2:
Just to reiterate: the whole point of the question is that the default content could be a long stream of HTML. Solving the problem by passing in a string (be that formatted as HTML or not) wouldn't work for my real-world needs.
I think the solution is this:
{{-- .../component/template.blade.php --}}
<div>
#if (isset($heading))
{{ $heading }}
#else
<h1>Default Heading<span class="subhead">default subheadin and lots of other html content</span></h1>
#endif
<p>{{ $slot }}</p>
</div>
It's not super elegant, but I think it's the only solution. Anyone else have a better answer, I'd love to hear it.
If you pass data like:
<x-h1para header="<span>Header content</span>">
<div>Default slot content here</div>
</x-h1para>
You can display in your component like:
<div>
<h1>{!! $heading ?? 'Default Heading Here' !!}</h1>
{{ $slot }}
</div>

how to escape curly braces in vue.js

I have data in my database that may contains curly braces{{ }}.
{{-- inside app.blade.php --}}
<!-- vue app -->
<div id="app">
...code
<div> {{ $data }} </div>
...code
</div>
so if I want to display it to the user this data cause problem if it's inside Vue app. and vue think it's javascript codes to execute.
for example if the $data is equal to {{ title->links() }} then I get an error and the whole app doesn't compile at all. (it passes the blade template).
[Vue warn]: Error compiling template:
invalid expression: expected expression, got '>' in
_s(title->links())
Raw expression: {{ title->links() }}
305| <div>{{ title->links() }}</div>
| ^^^^^^^^^^^^^^^^^^^^^^^
what is the best way to escape {{ }} curly braces for user data (in Vue.js)??
You need use the v-pre or v-html directive:
<div v-pre>{{ data }}</div>
or
<div v-html="'{{ data }}'"></div>
ref link https://v2.vuejs.org/v2/api/#v-pre

How do we concatenate using blade template engine Laravel

I am new to Laravel and don't know if it is possible at all to concatenate a string to a blade variable.
I want to display the name of the author with the ~ sign concatenated to the author's name from the left. Here is my code.
<div class="author">~{{ $quote->author or '' }}</div>
What I want is if the author is set, it should be displayed with the ~.
How do I concatenate this?
Thanks for any help
This would be better
<div class="author">~{{ isset($quote->author) ? $quote->author : '' }}</div>
UPDATE:
<div class="author">{{ isset($quote->author) ? '~'.$quote->author : '' }}</div>
<div class="author">
#if (isset($quote->author))
~ {{ $quote->author }}
#else
#endif
</div>
https://laravel.com/docs/5.3/blade#control-structures

Unable to pass value to view upon successful redirect

Hello i am simply trying to pass a value to another page in my code. basically when the form has finished processsing it should redirect to the next page with a certain value but i keep getting undefined $reference (which is the name of my variable on that page):
#section('content')
<h3>Transaction Complete</h3>
<div class="form-group">
<h3 style="margin:0 !important;padding:0 !important;">
<small>Your Reference Code: </small>
</h3>
<div class="col-md-12 ticket-code">
<h3>
" {{ $reference }} "
</h3>
</div>
</div>
#endsection
this is the redirect code:
$reference = 'REF7625269';
return \Redirect::to('tickets/payment/complete')->with('reference', $reference);
Try putting it into an array:
return \Redirect::to('tickets/payment/complete')->with(['reference', $reference]);
Also, I personally like the redirect helper:
return redirect()
->to('tickets/payment/complete')
->with(['reference', $reference]);
or named URLs:
return redirect()->route('home.route.name');

Resources