Error when used within v-else-if

[SHxKM]

Part of my component looks like this:

<div v-for="article in articles" :key="article.id">
  <h2  v-html="$options.filters.parseMd(article.title)"/>
  <div v-if="loggedIn || article.restrictions.length < 1" v-html="$options.filters.parseMd(article.content)"/>
  <div v-else-if="article.restrictions[0] == 'member' & !loggedIn">
      <fa :icon="['fas', 'lock']"/>
      <span>
      Some warning
      </span>
  </div>
</div>

The lock icon is rendering correctly, but I'm getting the following error messages in the console:

Parent: [Many lines, highlights the div that contains fa] Mismatching childNodes vs. VNodes:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing

. Bailing hydration and performing full client-side render.

It seems that this is because the fa icon element is nested inside a conditional block? If I remove it out of the conditional div the error goes away. what am I missing?

Update: if I switch vs-else-if for v-if the error goes way; what gives?

[vaso2]

I'll take a closer look, but it seems the problem is not with this plugin or font-awesome, but with with nuxt itself

[SHxKM]

@vaso2 - thanks. Ill try to do a few tests myself with my limited knowledge. I’m not sure Vue is that smart, but perhaps it fails because the clauses are not necessarily exclusive? Hence why v-if works and v-else-if doesn’t (far fetched, I know)

[tuomassalo]

Looks like this bug: https://github.com/vuejs/vue/issues/11299

[nerdoza]

I've found this issue with both v-if and v-else-if, both of which can be resolved by using v-show instead.