I am currently working on a page with multiple cases. When I click on a case, the details for that case appear on the same page. Here is a screenshot of how it looks: https://i.sstatic.net/Y9S4J.png
As you can see in the screenshot, there are two cases listed - "ublox" and "test case". Clicking on either of them displays the details at the top of the page.
However, I want the details to be displayed on a separate page when a case is clicked. Since I am new to vuejs, I would appreciate any help in achieving this.
Below is my Vue.js code:
<template>
<div>
<!-- Code block goes here -->
</div>
</template>
<script>
// Vue.js script goes here
</script>
and here is my web.php file:
Route::get('/case-log/{id}', 'CaseLogController@index');
This is my Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
Your assistance in this matter would be greatly appreciated. Thank you in advance.
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<!-- Table header content goes here -->
</thead>
<tbody>
<!-- Table body content goes here -->
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
// Script for handling data fetching goes here
</script>
This has been updated:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<!-- Table header content goes here -->
</thead>
<tbody>
<!-- Table body content goes here -->
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
// Script for handling data fetching goes here
</script>