v-if check issues

[jrappen]

With the following:

<!-- ./docs/.vuepress/components/**.vue -->

<template v-if="x">
  <img v-if="x != ''" :src="y" :alt="z" loading="lazy">
</template>

the conditional checks in the v-ifs of template and img do not work as expected.

---

Any quick fix?

[Mister-Hope]

Who told you v-if is allowed in root template>

[jrappen]

There's https://vuejs.org/guide/essentials/conditional.html#v-if-on-template.

[jrappen]

Ok, so:

<template>
  <template v-if="...">
    <!-- ... -->
  </template>
</template>

fixed the first issue with v-if.

---

What do I do with the img?

[jrappen]

Fixed the second by replacing v-if="x != ''" with v-if="x".

[Mister-Hope]

https://vuejs.org/api/sfc-spec.html#template

The root tag in sfc is marking "parts"