Vue child component wait for props

8
votes

I have a parent component that's passing a prop (selectedOption) to a child component, and the child component takes the prop and renders an icon based on the prop. But every time I load the page, the child component throws an error because the prop has not been passed down in time, but it's fine after a second when everything is passed down. How can I avoid this?

Parent (Settings.vue):

<template>
    <settings-menu
      :selectedOption="selectedSettingsOption">
    </settings-menu>

Child (SettingsMenu.vue):

<template>
  <component
    :is="`icon-${ selectedOption }`">
  </component>
</template>
1
vue.jsvue-component

1 Answers

11
votes

Just put a v-if to hide the component until the prop gets passed.

<template>
  <component
    v-if='selectedOption' :is="`icon-${ selectedOption }`">
  </component>
</template>