Как рендерить компонент только после получения данных из геттера VUEX?

Есть компонент с вычисляемым свойством data:
computed: {
      data(){
        return this.$store.getters['currency/getCapitalization'];
      }
    },


В шаблоне компонента выводится: {{data.capitalization | comma | dollar}}, но при первом рендере (затем сразу видимо происходит второй, так как данные в геттере появляются, появляется ошибка:
[Vue warn]: Error in render: "TypeError: Cannot read property 'capitalization' of undefined".
, которая ссылается на {{data.capitalization | comma | dollar}}, ошибка не критична, видимо, так как все перерендеривается сразу же и работает в дальнейшем, но хотелось бы чтобы подобные ошибки не мазолили глаза в консоли, как можно это исправить?
  • Вопрос задан
  • 487 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Не надо рендерить элемент, в который вы выводите data.capitalization, пока нет data: v-if="data".
Ответ написан
Комментировать
bootd
@bootd
Гугли и ты откроешь врата знаний!
убрать вообще вычисляемое свойство data и использовать просто
$store.getters['currency/getCapitalization']
в шаблоне, оно и так реативное. А ещё лучше так:
<template>
<div class="box">
<div class="currency" v-if="getCapitalization.capitalization">
{{getCapitalization.capitalization | comma | dollar}}
</div>
</div>
</template>


<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters('currency', [
'getCapitalization'
])
}
}
</script>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы