v-if return error on template tag when condition is changed

[ezmemoar]

I noticed that v-if not working when placed inside <template> tag:

<template v-if="data.length < 1"> Loading </template>
<template v-else>
      <div v-for="val in data">{{ val.name }}</div>
</template>

<script type="module">
  import { createApp } from "https://unpkg.com/petite-vue?module";
  createApp({
    count: 0,
    data: [],
    counting() {
         this.data.push({name: 'hello'})
    },
  }).mount();
</script>

it return error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')

are there any explanations about this? or is it just a bug?

[sqllyw]

your sample is actually working:
https://jsfiddle.net/vau5kxqt/1/

[halivert]

It's failing when pressing twice

[ezmemoar]

your sample is actually working: https://jsfiddle.net/vau5kxqt/1/

checked your fiddle, it is actually error since the v-for didn't render anything into the view. If you remove the v-if - v-else, v-for will render the data

[sqllyw]

if replace template with 'div', the code is working:

https://jsfiddle.net/as0oLnuc/

[ezmemoar]

hmm that is somehow a bit weird since the error didn't explain anything useful. Hope someone can PR this, thank you for your help

[kissu]

Similar question was asked here: https://stackoverflow.com/questions/77112041/conditional-rendering-inside-a-template-element-used-for-looping-over-an-array

I guess that v-if on the template tag is just not available (using browser's default template I suppose? 🤔).