How to render a component only after receiving data from a VUEX getter?

Question

Vue.js

There is a component with a computed data property:

computed: {
      data(){
        return this.$store.getters['currency/getCapitalization'];
      }
    },

The component template displays: {{data.capitalization | comma | dollar}}, but during the first render (then the second one apparently happens immediately, since the data in the getter appears, an error appears:

[Vue warn]: Error in render: "TypeError: Cannot read property 'capitalization' of undefined".

, which refers to {{data.capitalization | comma | dollar}}, the error is not critical, apparently, since everything is re-rendered immediately and works in the future, but I would like such errors not to glare in the console, how can I fix this?

Answer 1

You don't need to render the element you're rendering data.capitalization to while there's no data: v-if="data".