如何使用 Vuejs 在单独的页面上显示详细视图答案

【问题标题】：How to display detail view on separate page using Vuejs如何使用 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> 设为超链接不符合您的要求吗？
如何添加超链接？你能展示一下吗？

标签： javascript laravel vue.js components

【解决方案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);
我已经添加了我的详细视图模板，请检查并指导我哪里错了