Не могу понять в чем проблема с Vuex, пишет Error in render: «TypeError»?

Question

[Константин]

Добрый день.
Ввожу адрес в командной строке браузера localhost:8080/product/1
Не могу никак понять, почему когда я распечатываю объект {{loadProduct}}, распечатывается без проблем,


а когда указываю какое-то свойство объекта {{loadProduct.price}}, то в консоле получаю ошибку, но при этом свойство выводится на экран.


Если кто знает подскажите пожалуйста.
Заранее благодарен.

Comments

[Модератор]

Константин Читаем п. 3.8 регламента работы сервиса и исправляем. Спасибо.

Answer 1

[Алексей Ярков]

Вот что заставляет постить код картинками? Капец...
По делу: напишите так -

<span v-if="loadProduct">{{ loadProduct.price }}</span>

Answer 2

[2perca]

Проблема в том, что в момент обращения в свойству price, loadProduct этого свойства еще не имеет. В state необходимо добавить это свойство с дефолтным значением, например 0 или null, null при рендере будет пустой строкой. Тогда, ошибки не будет, а к моменту когда там появятся реальные данные, гетер отработает и отрендерит их.
Еще несколько моментов:
1. Не используйте пропсы в таком виде, вот так будет намного лучше

props: {
    data: {
        type: Number,
        default: () => null
    }
}

2. id у вас есть в урле (в params), его не нужно пробрасывать через пропсы, используйте
this.$route.params