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

Question

[Алексей Скляров]

Есть компонент с вычисляемым свойством 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}}, ошибка не критична, видимо, так как все перерендеривается сразу же и работает в дальнейшем, но хотелось бы чтобы подобные ошибки не мазолили глаза в консоли, как можно это исправить?

Comments

[alex]

<div v-if="data">{{data.capitalization | comma | dollar}}</div>

Answer 1

[0xD34F]

Не надо рендерить элемент, в который вы выводите data.capitalization, пока нет data: v-if="data".

Answer 2

[Дима Паутов]

убрать вообще вычисляемое свойство 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>