VueJS routing on click to chapter quiz - laravel

I am new to vuejs. I need to create a router link quiz with path /chapter/{{id}}/quiz. it will open another component
Path
{ path: '/chapter/:id(\\d+)/quiz', component: require('./components/Quiz.vue') },
router link
<a href="#" #click="editModal(chapter)">
<i class="fa fa-edit blue"></i>
</a>
/
<router-link :to="/chapter/{{chapter.id}}/quiz">
<i class="fa fa-question-circle blue"></i>
</router-link>
Currently I am getting error
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">

You cannot use {{ }} for attribute values. So for your router-link component you will have to use javascript string concatenation to add the chapter.id or use a computed property to generate the url.
<router-link :to="'/chapter/' + chapter.id + '/quiz'">
Or if you are using es6 you can use template literals:
<router-link :to="`/chapter/${chapter.id}/quiz`">

Related

How to set up a beautiful url in laravel 8?

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

Views and downloads count - Update database on view with lightbox and download

I've made a site with laravel and have a page where there are pictures that can be seen in hi-resolution via fancybox or downloaded. In the database i have counters for each action. and I do already have GET routes set up for the counting since they are used in other situations too.
for example: www.mysiste.com/somecode/someothercode/image/viewed
the simplified structure of each image is this.. This is called inside a for each loop.. i removed all styling and classes for better reading...
<div >
<div class="card" style="background-color: lightgray">
<div >
<a data-fancybox="gallery" href="/images/......../{{$photo->filename}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
</div>
<div class="card-footer">
<div>
<div>
<a download="{{$photo->filename}}" href="/images/......../{{$photo->filename}}">
<span>Download (Hi-Res)</span>
</a>
</div>
<div>
<a download="social_{{$photo->filename}}" href="/images/......../social_{{$photo->filename}}">
<span>Download (Social-Res)</span>
</a>
</div>
</div>
</div>
</div>
</div>
I would need that when they hit the download button it calls a certain URL in the background for upcounting.. (most important)
If possible I would like to hit another URL when the images are viewed fullscreen through fancybox.
how can this be done?
You can do something in the lines of:
<a data-fancybox="gallery" href="{{ route('photo.fancybox', ['photo' => $photo])}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
...
<a href="{{ route('photo.download', ['photo' => $photo])}}">
<span>Download (Hi-Res)</span>
</a>
PhotoController
public function download(Photo $photo){
$photo->downloadCount->increment();
return redirect('/images/......../'. $photo->filename);
}
public function fancybox(Photo $photo){
$photo->fancyboxCount->increment();
return redirect('/images/......../social_'. $photo->filename);
}
And make sure to register your new routes accordingly:
Route::get('photo/download', 'PhotoController#download')->name('photo.download');
Route::get('photo/fancybox', 'PhotoController#fancybox')->name('photo.fancybox');

Laravel WhereIn Doesn't Accept Array Value

I have this on my blade file:
{{ Form::open(['route' => 'my_route_name']) }}
<button type="submit" class="btn btn-sm btn-success">
<i class="fa fa-file-excel-o" aria-hidden="true"></i> Download
</button>
{{ Form::hidden('my_ids', $my_ids) }}
{{ Form::close() }}
Checking on the chrome's developer mode, the value of my hidden textbox named my_ids is:
[1,2,3,4,5,6]
Upon clicking the Download button, it goes on my controller:
$results= Model::whereIn('id', $request->my_ids)->get();
This is where I am getting an error.
DD-ing dd($request->my_ids) on my controller gives me "[1,2,3,4,5,6]".
However, if I just put the values directly on the eloquent query like below, it would work.
$results= Model::whereIn('id', [1,2,3,4,5,6])->get();
Am I missing something here?
Your dd shows that $request->my_ids is a string, therefore you must parse it before you use it as array.
Try
$results= Model::whereIn('id', json_decode($request->my_ids))->get();

Is it possible to delete record without using forms in laravel 5.4

I want to delete a record but I haven't been successful, apparently my code is wrong. Solutions i came across say i have to use a post in my form method and add the method_field helper. This would mean my view having a form in it, i want to avoid this if possible. Is it then possible to do my delete another way. Below is my code
snippet of my view
<div class="backbtn">
<a class="btn btn-savvy-delete" href="/tasks/{{$task->id}}" data-toggle="tooltip" title="Delete"><i class="fa fa-trash-o" aria-hidden="true"> Delete</i></a>
</div>
<div class="panel-body">
<p><strong>Owner:</strong> {{ ucfirst($task->employee->firstname) }} {{" "}} {{ ucfirst($task->employee->lastname) }}</p>
<p><strong>Task:</strong> {{ $task->title }}</p>
<p><strong>Description:</strong> {{ $task->description }}</p>
</div>
TaskController
public function destroy($id)
{
Task::destroy($id);
Session::flash('status', "Task was successfully deleted.");
return redirect('/tasks');
}
web.php
Route::delete('/tasks/{id}', 'TaskController#delete');
Im not sure what error you are getting, but i can point out a few things. For one use Route::get instead of ::delete, you are calling it via a link not a form method.
Secondly to delete follow what the laravel doc says here eg.
$task = App\Task::find(1);
$task->delete();

Blade #include directive

Blade's #include directive, allows you to easily include a Blade view from within an existing view. All variables that are available to the parent view will be made available to the included view. How can I hide parent values from the included view? I want to only use the variables sent to it or else, use the default variables.
For example, consider the following view. that can access a variable named $title
<a class="btn btn-danger" href="{{$url or URL::previous()}}"><i class="fa fa-arrow-left"></i>
{{$title or 'Save'}}
</a>
Not the prettiest solution, but I think I would handle it by putting all of those vars in an array:
<a class="btn btn-danger" href="{{$myData['url'] or URL::previous()}}"><i class="fa fa-arrow-left"></i>
{{$myData['title'] or 'Save'}}
</a>
and then including the view: #include('view', ['myData' => null])
Note, this is untested.

Resources