0

Есть файл index.js(представляющий собой экземпляр vue router):

import VueRouter from 'vue-router'
import List from '../pages/List'
import Zabor from '../pages/Zabor'
import Item from '../pages/Item'

export default new VueRouter({
  mode: 'history',
  routes: [
      {
        path:'/',
        name: 'list',
        component: List
      },
      {
        path:'/zabor',
        name: 'Zabor',
        component: Zabor
      },
      {
        // парметр id - номер заказа
        path:'/item/:id',
        name: 'Item',
        component: Item,
        props: true
      },
    ]
  })

Есть файл Item.vue(Страница представляющая из себя карточку, в которой должны отображаться данные по текущему заказу):

<template>
    <div class="listCard">
        <router-link to="/">Вернуться к таблице</router-link>
        <h1>Карточка заказа №{{ id }} от {{ itemInfo.createdAt }}</h1> 
         <div class="info">
            <p>Номер заказа - </p>
            <p>Статус заказа - </p>
            <p>Способ доставки - </p>
             <p>Населенный пункт - </p> 
             <p>Дата последнего изменения - </p> 
        </div>
        
         <hr>
        <p>Cтоимость - <strong></strong></p> 
    </div>
</template>

<script>
    export default {
        props: {
            id: String,
        },
        computed: {
            // поиск выбранной записи из массива с заказами по номеру id
            itemInfo() {
                return this.$store.state.orders.find(item => item.shop_id == this.id)
            }
        }

    }
</script>

<script>
    export default {
        props: {
            id: String,
        },

    }
</script>

Здесь входной параметр id передается из компонента ordersTable с помощью конструкции(смотрите ниже), вычисляемое свойство itemInfo возвращает строку данных выбранного заказа

Есть компонент таблицы ordersTable(представляющий из себя таблицу всех заказов), в которой при нажатии на номер заказа происходит переход на страницу карточки выбранного заказа,т.е. в ней отображается вся инфа по заказу. Данную привязку сделал так:

<template slot="table-row" slot-scope="props">
            <span v-if="props.column.field == 'shop_id'">
                <span @click="$router.push({ name: 'Item', params: {id: props.row.shop_id, test:'test'}})" class="link">{{props.row.shop_id}}</span>
            </span>
</template>

Уточнение! Данные для таблицы прилетают из vuex store, а в store данные попадают от сервера.

Теперь при выборе какого-либо заказа происходит переход на карточку этого заказа и все необходимые данные отображаются как надо, однако после перезагрузки страницы свойство id отображается как надо, а свойство itemInfo не отображается, в консоль выпадает ошибка якобы itemInfo это null. Как передать данные по заказу, чтобы при перезагрузке станицы они отображались.

Дополнение! Пробовал получать данные по заказу в файле Item.vue с помощью get запроса на сервер, все получилось. Однако если данные приходят из store, то после перезагрузки они исчезают.

1
  • Ответ есть в документации vue-router, раздел "Passing Props to Route Components" - к сожалению, на дублирование его тут, у меня не хватает времени.
    – yar85
    17 авг 2021 в 8:08

1 ответ 1

0

Вероятно, у вас поиск в свойстве itemInfo начинается до того как эти данные подгружаются с сервера (проблема SPA), поэтому выдает ошибку:

в консоль выпадает ошибка якобы itemInfo это null

Как вариант, можно скрывать контент карточки товара (при помощи v-if) до тех пор пока данные не будут загружены, а вместо него отображать индикатор загрузки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.