如何使用 Vuejs 在单独的页面上显示详细视图
Posted
技术标签:
【中文标题】如何使用 Vuejs 在单独的页面上显示详细视图【英文标题】：How to display detail view on separate page using Vuejs 【发布时间】：2020-11-26 18:38:39 【问题描述】：我有一个页面，其中有多个案例，当我单击案例时，它会在同一页面上显示针对此案例的详细信息。 我已附上截图
您可以看到两个案例显示 1) ublox 和 2) 测试案例，当我单击其中任何一个时，您可以看到针对此案例的最详细信息。
但我不想在此页面上显示这些详细信息，我希望在单击任何这些案例时在单独的页面上显示这些详细信息。我是 vuejs 的新手，任何人都可以帮我解决这个问题吗？ 非常感谢您的帮助。
我的vue代码：
<template>
<div>
<div class="content">
<div class="container-fluid">
<div class="row">
<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>
<!-- /.card-header -->
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="clickList(kase)">
<td>kase.name</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Add New Case</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal" @submit.prevent="onSubmit" @keydown="form.errors.clear()">
<div class="card-body" style="height: 239px;">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-info" :disabled="form.errors.any()">Add Group</button>
</div>
<!-- /.card-footer -->
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
</template>
<script>
export default
data()
return
cases: [],
lists: [],
form: new Form(
'name': ''
)
,
created()
axios.get('/new-case')
.then((data) => this.cases = data);
,
methods:
clickList (Kase)
axios.get(`/case-log/$Kase.id`).then(response => this.lists = response.data);
,
onSubmit()
this.form
.post('/new-case')
.then(kase => this.cases.push(kase));
</script>
还有我的 web.php
Route::get('/case-log/id', 'CaseLogController@index');
我的控制器：
class CaseLogController extends Controller
public function index($id)
$case = kase::with('sockets')->find($id);
return $case->sockets;
您的帮助将不胜感激。 提前致谢
<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>
<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>
</template>
<script>
export default
data()
return
lists: [],
,
created()
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.id
axios.get(`/case-log/$Kase.id`).then(response => this.lists = response.data);
,
</script>
已更新：
<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>
<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>
</template>
<script>
export default
data()
return
lists: [],
,
created()
const id = this.$route.params.id
axios.get(`/case-log/$Kase.id`).then(response => this.lists = response.data);
,
</script>
【问题讨论】：
简单地将<td>kase.name</td> 设为超链接不符合您的要求吗？
如何添加超链接？你能展示一下吗？
【参考方案1】：
您必须使用 Vue-router 定义您的路由。 documentation 向您展示了如何开始。
然后你需要将细节的模板提取到一个组件中，比如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 组件中，您必须使用 created/mounted 钩子从 url 中获取唯一标识符，（在这种情况下，我使用 created 生命周期钩子，但 mount 也可以使用），您将使用进行将填充模板的数据库调用。
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);
,
这是事物的一般要点。您可以从这里计算其余部分。 This 将为您提供更多详细信息。
【讨论】：
您好，感谢您提供详细概述，但我不明白 created() const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // 您在路由中输入的任何名称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); ,
我需要放在这里来代替 uniqueIdentifierToFetchTheDetailsFromTheDatabase
创建的生命周期钩子用于在创建组件时执行操作。您可以在那里进行数据库调用以获取将用于填充模板的列表。使用 this.$router.push, you get a url from which you can get the identifier (in your case, id) using this.$route.params.id, if your route is /path-to-component-for-view-details/:id` 或 this.$route.params.employeeId，如果您的路线是 /path-to-component-for-view-details/:employeeId 等。
当您从 url 中获取 id 时，您可以使用它来进行 db 调用。在您的情况下， axios.get(/case-log/$Kase.id).then(response => this.lists =response.data);
我已经添加了我的详细视图模板，请检查并指导我哪里错了以上是关于如何使用 Vuejs 在单独的页面上显示详细视图的主要内容，如果未能解决你的问题，请参考以下文章
带有 uitableview 的基于页面的应用程序；转到下一页时如何显示详细视图并在表格中显示其他数据？
如何使用 vuejs 在 laravel 刀片中显示验证错误