Вам нужно будет определить свои маршруты с помощью Vue -router. В документации показано, как начать работу.
Затем вам нужно извлечь шаблон деталей в компонент, скажем, DisplayDetailView.vue
Итак, у вас будет:
DisplayDetailView. vue
<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>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.....
Когда вы нажимаете на деталь, она переместит вас к компоненту, где показаны детали.
Например, нажатие на Ublox
может иметь код, прикрепленный к нему следующим образом:
ComponentWithCaseName. vue
<div class="col-lg-6">
<div class="card">
...
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick"> // add click handler
<td>{{kase.name}}</td>
</tr>
......
</div>
</div>
И у вас есть метод в компоненте, где щелкают имя случая
methods: {
handleCaseClick() { // this pushes it to the component that has the display view details i.e DisplayDetailView.vue
this.$router.push(`/path-to-component-for-view-details/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}')
}
}
В компоненте DisplayDetailView. vue вы должны получить уникальный идентификатор из URL-адреса с помощью хука created / connected (в данном случае я использую созданный обработчик жизненного цикла, но смонтированный также будет работать), который вы будете использовать для вызова базы данных, который заполнит шаблон.
DisplayDetailView. vue
export default {
data() {
return {
cases: [],
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // whatever name you put in the route `e.g if the route is `/path-to-component-for-view-details/:caseId`, you do this.$route.params.caseId
axios.get(`/case-log/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}`).then(response => this.lists = response.data);
},
}
Это общая суть вещей. Вы можете понять остальное отсюда. Это предоставит вам более подробную информацию.