Home

I can use a v-if attribute on a component and it works fine.

If I use v-if on a div element with a key of a computed variable that is an object and then have other elements within that (or just text within it) this error is raised in production
client.js:35 [nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

E.g. this works:

<div class="column news-dates has-text-right">
    Some text
</div>

This raises an error in production:

<div class="column news-dates has-text-right" v-if="page.liveDate !== undefined">
    Some text
</div>

Strangely this works:

<div class="column news-dates has-text-right" v-if="true">
    Some text
</div>

So does this:

<div class="column news-dates has-text-right" v-if="page !== undefined">
    Some text
</div>

page is a computed property. If I make a new computed property which returns this.page.liveDate !== undefined is fails. Basically checking against any key in the page object which is computed causes this problem.

There is even a computed prop which returns a boolean this.page.live which I’ve outputted in the template to make sure it’s returning true which hasn’t worked either.

An empty dom element is fine because it doesn’t need to append a child element to it.

Any ideas?