@Redrik_Shuhart

Как в layout добавить компонент зависящий от роута, чтоб не было ошибок при смене роута и шаблона?

Есть 2 шаблона:

default.vue
<template>
  <div>
    <div>Default Layout</div>
    <hr>

    <Navbar></Navbar>

    <Nuxt/>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
export default {
  components: {
    Navbar
  }
};
</script>


shopLayout.vue
<template>
  <div>
    <div>Shop Layout</div>
    <hr>

    <Navbar></Navbar>

    <Nuxt/>

    <buy-best-item></buy-best-item>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
import BuyBestItem from "@/components/BuyBestItem";
export default {
  components: {
    Navbar,
    BuyBestItem
  }
};
</script>


В shopLayout импортирован компонент BuyBestItem, который завязан на текущем роуте.

BuyBestItem.vue
<template>
  <div class="buy-card">
    <h2>Best item "{{bestItem.name}}"</h2>

    <img :src="bestItem.src">

    <div>$ {{bestItem.price}}</div>

    <button>Buy</button>
  </div>
</template>

<script>
export default {
  computed: {
    bestItem() {
      return this.$store.state.shop[this.$route.params.item_name];
    }
  }
};
</script>


Если перейти по ссылкам: Главная страница (default layout) или Страница товара (shopLayout), то все ренедерится нормально без ошибок.

Но если со страницы товара перейти по ссылке Home, то всё падает.

Я считал что при смене роута сначала берётся нужный layout, а потом происходит все вычисления и рендеринг. Но получается, что роут изменился, компонент ищет в хранилище значение, которого нет и всё падает при рендере страницы, т.е. до фактической смены layout`а.

Как можно это исправить не меняя зависимость компонента от роута? Песочница
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack
Что вам нужно так это добавить проверку:
<div class="buy-card" v-if="bestItem">
А ошибка возникает по той причине, что все вычисления реактивных свойств, а следовательно страниц и шаблонов происходят снизу вверх, от самых вложенных компонентов до самых верхних. Но я могу ошибаться
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 апр. 2020, в 23:07
30000 руб./за проект
04 апр. 2020, в 23:05
100000 руб./за проект
04 апр. 2020, в 22:57
2000 руб./за проект