Child component update issue

I have a child component and this is how it looks in the parent:

<UnverifiedAttribute
   :status="resource.attributes.phone"
   :resource="resource"
/>

When the page is loaded initailly this child will simply show a yes / no approved text.
I stripped everything out because its not working.

UnverifiedAttribute:

.... 
props: {
    resource: {
      type: Object,
      required: true,
      default: () => {}
    },
    status: {
      type: Boolean,
      required: true,
      default: false
    }
  },
....
<template>
  <section>
   <!-- THIS PRE STATUS WILL CHANGE -->
   <pre> status -> {{status}} </pre>
    <!-- IF - ELSE DO NOT CHANGE -->
    <div v-if="status">
     <p>status is true</p>
    </div>
    <div v-else>
       <p>status is false</p>
    </div>
  </section>
</template>

I can see the status change from true / false but the if / else never do.

On initial page load whatever the status is displays correct, the parent will change the passed status, and the child component will show the status → true or false accordingly but the if’s never change.

I stripped everything out so its pretty bare but still it will not reflect changes

Spot any errors?

I find that extremely strange. What value does status have?

I ended up simply making a button in the parent when on click would toggle the status value true / false and pass that down to the child via status prop to easily simulate the changes without saving the form over and over

It still showed correct value inside the child

<pre> status -> {{status}} </pre>

I deleted all the template code, then using the simple divs with just the text as above and the if / else worked as it should.

But when I rebuilt as i had the full original template structure it stopped working once i added in the v-tooltip.
Tried over and over but anytime there was v-tooltip it would stop displaying properly so i dont know if its a bug or something. I just ended up leaving out the tooltip and its working fine so I will just go without the tooltip

<div v-if="status">
   <v-tooltip top> 
.....

Thanks for your time again,

Still sounds really strange (: And there are no error messages in the console when you change status and use <v-tooltip>?

This was the original code that was not working with the tooltip.
Perhaps i missed something but in the end removing the tooltip and now it displays properly.

I did not see any errors in console.

<template>
<section>
    <pre>status -> {{ status }}</pre>

    <div v-if="status">
      <v-tooltip top>
        <template v-slot:activator="{ on, attrs }">
          <v-chip label small dark color="z-success" v-bind="attrs" v-on="on"
            ><v-icon left small>mdi-check</v-icon>VERIFIED</v-chip
          ></template
        >
        <span>Show something as Verified</span>
      </v-tooltip>
    <div v-if="!status">
      <v-tooltip top>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-bind="attrs"
            depressed
            class=""
            small
            color="z-warning"
            v-on="on"
            @click="handleClick()"
          >
            <v-icon left small>mdi-information-outline</v-icon>
            Button text
          </v-btn></template
        >
        <span>Show something unverified</span>
      </v-tooltip>
</section>
</template>

But i moved on past the issue since the tooltip was just a minor UI feature and without makes no real difference and pretty much a null issue at this point.

But maybe if you see something i missed might help someone else.

Thanks again for your time

Could it be that status is a boolean object? Cause then it would always be truthy. Or could it be that status is the string "true" or the string "false"? Because then it would always be truthy too.

In your first post you pass resource.attributes.phone as status. Sounds like a string? And in your props declaration you have defined it as a boolean, with the default value false. Maybe the default value is used because you don’t pass a boolean? I don’t know what happen when you “break the contract”, but I imagine Vue would at least log an angry error message, if not crashing.

Status is a passed Boolean.

I am not going back to figure it out, i moved past it. But essentially there is a form for email and phone
User enters either and a btn would appear since they both / either would be unverified at that point. Nothing would show, leave page and come back it would show unverified. Click verify and the status when veried would update to true, the child component would show true yet there is nothing for the label / btn just empty.
Leave page and come back and it then showed true and the label. Same API resource for all actions on the page so there is no issue with updating properly. So either way consider it dead issue since without the tooltip it works fine, same prop, same status, same everything, just no tooltip :smile:

If email was verified it would show Verified label, and then if changed it was supposed to show the Click to Verify btn, then on form save pass the status as false and show the click to verify btn… but it never did. If i left the page and came back it would show properly

:status="resource.attributes.phone"

Is the true false value

:status="resource.attributes.phone_number"

Is the string. I did not come up with the names i just use what i get passed from the API

I’m out of ideas, so I concur to leaving this behind us (: But it does annoy me that I don’t know what’s wrong xD