How to use v-if on a child component to be reactive to the parents attributes?

Viewed 99

I have a Child component, which displays a warning message if the wrong dates from an Input are selected. This warning should only be possible in the Parent Component, because the Child is re-used throughout my application.

I want to add a v-if to the warning notification, that it can only appear if it's rendered in that exact Parent Component, and not anywhere else the component is re-used. I have tried with V-If, tied to the component name , but that has not solved the issue.

What is the best way to make the child component register that it has been rendered in ParentComponent?

<ChildComponent>
<div>
  <b-datepicker
    class="datepicker-input"
  />
  <b-notification
   v-if="this.componentName === 'parentComponent" >
    'WARNING, WRONG DATES SELECTED'
  </b-notification>
</div>


<ParentComponent>
 <div>
  <ChildComponent>
  </ChildComponent>
 </div>

data() {
 return {
  componentName: this.$options.name,
</ParentComponent>
0 Answers
Related