query field compareAtPrice

[Asef Camel]

Hello,

Thank you for this great starter.
When i query on the field compareAtPrice i'm getting the data but when i open the console it gives me undefined and my project cant build anymore?
has anyone found a workaround for this?

[Asef Camel]

Okay i have this issue when one of my variants does not have a compare at price.
I thought I could fix this with a simple v-if but it is still giving undefined..

[Travis Reynolds]

@asefcamel What does your v-if look like?

[Asef Camel]

Thank you for your answer @thetre97
This is how my v-if looks:
<div> <p v-if="currentVariant" class="product-price"> {{ currentVariant.price.amount }} </p> <p v-if="currentVariant.compareAtPrice"> {{ currentVariant.compareAtPrice.amount }} </p> </div>

[Asef Camel]

And it get the error [Vue warn]: Error in render: "TypeError: Cannot read property 'compareAtPrice' of undefined"

[Asef Camel]

Okay i fix this issue with this line of code
<p v-if="currentVariant">{{ currentVariant.compareAtPrice === null ? '' : currentVariant.compareAtPrice.amount }}</p>

Is this the right way ?

[Travis Reynolds]

You could do it like that, for sure.
You just need to check that you have a currentVariant check as well as a currentVariant.compareAtPrice check.

So your first code example might look like:

<div v-if="currentVariant">
    <p v-if="currentVariant.price">
      {{ currentVariant.price.amount }}
    </p>
    <p v-if="currentVariant.compareAtPrice">
      {{ currentVariant.compareAtPrice.amount }}
    </p>
</div>

[Asef Camel]

@thetre97 thank you very much, Greetings from Belgium 🙏