I want to pass the Vue data to Laravel include
Let say for example:
#include('sample-form', then pass vue data here)
as usual it looks similar to this:
#include('sample-form', ['id' => $data]);
But when includes Vue data like the first statement above it will returns error on my blade.
Here's my code:
<button type="button" data-toggle="modal" :data-target="'#edit_' + attribute.id" class="btn btn-info btn-xs radius"><i class="fa fa-pencil"></i> Edit</button>
And here's what I'm trying to accomplish:
#include('modals.edit-modal', :data-target="'#edit_' + attribute.id")
How should we do that exactly?
Put before your Vue app script in blade template:
<script>
Vue.prototype._data = {!! json_encode(['id' => $id] !!};
</script>
Now, you can access data from Vue like:
methods: {
test() {
alert(this._data.id)
}
}
Related
I have an a tag in one of my VueJS component like below.
<a href="" class="btn btn-sm btn-white">
<i class="tio-edit"></i>
</a>
I would like to place route('admin.shop.time.edit',1) inside href with ID parameter.
How can I do it ?
I use this package : https://github.com/tighten/ziggy
that provide a route() helper to use in javascript :
route('user.profile')
you can define which routes are accessible from the js in the config/ziggy.php file
<?php
return [
'whitelist' => [
'user.*',
'home',
'login',
'logout',
'password.*',
],
];
You just have to put a #routes helper in your blade layout and it will work
it's iso with the laravel route helper, and can handle parameters and so on, like for example you can do route('user.show', {id: '15'})
I am working on single SPA using laravel and inertia js. I am using multi language as well. So I am passing language as prefix parameter like this.
Route::group(['prefix' => '{language}'],function(){
Route::get('events',[HomeController::class,'event'])->name('events');
Route::get('events-details/{id}',[HomeController::class,'eventDetail'])
->name('events.reservations.index');
});
my controller
public function eventDetail($land,$id)
{
$events = $this->repository->getAllEvents();
$event_details = $this->repository->findById($id);
$time_interval = ReservationHelper::getTimeInterval();
return Inertia::render('Frontend/Pages/Reservation/Index', compact('events','event_details','time_interval'));
}
Calling in vue component like this
<Link
:href="
route('events.reservations.index', [$page.props.current_locale, id])
"
>
<div class="sao-box1 text-center">
<img :src="imgSrc" alt="" class="img-fluid rounded_img" />
<h3>{{ title }}</h3>
<div class="event-description" v-html="description"></div>
<a class="sl-btnBook">Book</a>
</div>
</Link>
when I click on that link I am getting error as
Error: Ziggy error: 'id' parameter is required for route 'events.reservations.index'
I don't know where I am going wrong.
thank you
change this line only from :-
:href="route('events.reservations.index', [$page.props.current_locale, id])"
to :
:href="route('events.reservations.index', {language : $page.props.current_locale, id: id})"
thanks
Now my url looks like this
localhost/3
But I want the path to look like this
localhost/some-text
To do this, I have a special url field in the Ad model, where the desired address is located. But going through it, I get 404
I have a route
Route::get('/{url}', [App\Http\Controllers\IndexController::class, 'show'])->name('show');
Method
public function show($url) {
$ad = Ad::where('url', $url)->first();
return view('ad', compact('ad'));
}
And btn
<a href="{{ route('show', ['url' => $ad->url]) }}">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</a>
To create better links just use slug
I use laravel slugable
I'm passing through data from laravel into my vue component in order to be able to use VueJS however in my for each statement, the loop ends after the first set of data and does not show everything.
<div>
<v-card-title>{{course}}</v-card-title>
<v-card-subtitle>{{school}}</v-card-subtitle>
</div>
<script>
export default {
name:"InputForm",
props: ['course', 'courseGroup', 'school'],
}
</script>
This is the blade code that im using to pass data to vue
#foreach ($modules as $module)
<input-form
:course="'{{$module->Course}}'"
:school="'{{$module->School}}'"
/>
#endforeach
use json_encode() function to send data to vuejs
#foreach ($modules as $module)
<input-form
:course="{!! $module->Course !!}"
:school="{!! $module->School !!}"
/>
#endforeach
I have a reject function in my Calendar controller but whenever I redirect to the view page it displays an error saying my route is not defined.
I've tried rearranging and renaming my route but it's still displaying the error.
Here is my form:
{!! Form::open(['url' => route('therapist.reject.appointment', $bookingRequest), 'method' => 'delete', 'onsubmit' => 'javascript:return confirm("Are you sure?")']) !!}
<button type="submit" class="btn btn-warning btn-block">Reject this appointment</button>
{{csrf_field()}}
{!! Form::close() !!}
Here are my routes. The other routes displayed are working perfectly:
Route::get('therapist-calendar/{bookingRequest}', 'TherapistCalander')->name('therapist.calendar');
Route::post('therapist-calendar/{bookingRequest}',
'TherapistCalander#saveAppointment')->name('therapist.book.appointment');
Route::patch('therapist-calendar/{bookingRequest}',
'TherapistCalander#finishedAppointment')->name('therapist.finish.appointment');
Route::delete('therapist-calendar/{bookingRequest}',
'TherapistCalander#rejectAppointment')->name('therapist.reject.appointment');
Route::delete('therapist-calendar/{bookingRequest}',
'TherapistCalander#cancelAppointment')->name('therapist.cancel.appointment');
And lastly, my function:
public function rejectAppointment(Request $request, BookingRequest $bookingRequest)
{
$bookingRequest->reject();
return redirect()->back()->with('rejectStatus', true);
}
The view page where this button belongs should be able to display the buttons for rejecting and finishing, alongside the calendar view.
EDIT
Follow up question: Is it possibly because the routes are similar to one another? If so, how do I fix this?
Try to change the Reject and Cancel the url string because it is similar.
Route::delete(
'therapist-calendar/{bookingRequest}/delete',
'TherapistCalander#rejectAppointment'
)->name('therapist.reject.appointment');
Route::delete(
'therapist-calendar/{bookingRequest}',
'TherapistCalander#cancelAppointment'
)->name('therapist.cancel.appointment');
Change your code to
{!! Form::open(['url' => route('therapist.reject.appointment', ['bookingRequest' => $bookingRequest]), 'method' => 'delete', 'onsubmit' => 'javascript:return confirm("Are you sure?")']) !!}
{{csrf_field()}}
<button type="submit" class="btn btn-warning btn-block">Reject this appointment</button>
{!! Form::close() !!}
The route parameters are passed as an array and that should work fine. Refer doc
Can you try this code
<form action="{{ route('therapist.reject.appointment', ['bookingRequest' => $bookingRequest]) }}" method="POST">
#method('DELETE')
#csrf
<button type="submit" class="btn btn-warning btn-block">Reject this appointment</button>
</form>
UPDATE
PROBLEM FIXED
I realized since they have similar links, web.php found it confusing so it did not read this route.
That is why I changed my route from:
Route::delete('therapist-calendar/{bookingRequest}',
'TherapistCalander#rejectAppointment')->name('therapist.reject.appointment');
To this:
Route::delete('doReject/{bookingRequest}',
'TherapistCalander#rejectAppointment')->name('therapist.reject.appointment');