[Vuejs]-Imported component and console message

by

1👍

✅

tipDetails is initialized as null, and then bound to <TipDetailsDialog>.tip, which causes it to try to render tip.test (where tip is null).

Since TipDetailsDialog doesn’t really render anything meaningful without a populated tip, that component should probably be conditionally rendered only when tipDetails is truthy:

<TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />

-1👍

tipDetails is initialized as null, and then bound to
<TipDetailsDialog>.tip, which causes it to try to render tip.test
(where tip is null).

Since TipDetailsDialog doesn’t really render anything meaningful
without a populated tip, that component should probably be
conditionally rendered only when tipDetails is truthy:

html <TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />

Or you can set a default value to the prop:

    props: {
        tip: {
            type: String,
            required: false,
            default: () => ""
        },
    },

Leave a comment