Как отобразить подробный вид на отдельной странице, используя Vuejs

Question

У меня есть страница, на которой есть несколько случаев, и когда я нажимаю на дело, он показывает детали этого дела на той же странице. Прикрепил скриншот

as you can see two cases are showing 1) ublox and 2) test case when i click any of them you can see on top detail against this case is appeared.

But I do not want to display these detail on this page I wan to display these detail on separate page when i click any of these case. I am new to vuejs can anyone please help me on this? Your help will be really appreciated.

My code of vue:

    

    
            ID  Идентификатор пользователя  Идентификатор случая  Заголовок сообщения  Тип процесса  Описание  Загрузка данных  Код сообщения  Тип журнала     {{list.id}}  {{list.user_id}}  {{list.case_id}}  {{list.message_title}}  {{list.process_type}}  {{list.description}}  {{list.data_load}}  {{list.msg_code} }  {{list.log_type}}         Название случая     {{kase.name}}        Добавить новый ящик   Имя      Добавить группу           экспорт по умолчанию {data () {return {cases: [], lists: [], form: new Form ({'name': ''})}}, created () {ax ios .get ('/ new-case') .then (({data}) => this.cases = data); }, методы: {clickList (Kase) {ax ios .get (`/ case-log / $ {Kase.id}`) .then (response => this.lists = response.data); }, onSubmit () {this.form .post ('/ new-case') .then (kase => this.cases.pu sh (kase)); }}}  

и мой веб. 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>

Answer 1

Вам нужно будет определить свои маршруты с помощью 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);
    },
 }

Это общая суть вещей. Вы можете понять остальное отсюда. Это предоставит вам более подробную информацию.