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

ezmemoar · 2022-06-10T04:18:55Z

ezmemoar
Jun 10, 2022

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 · 2022-06-10T23:11:53Z

sqllyw
Jun 10, 2022

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

4 replies

halivert Jun 10, 2022

It's failing when pressing twice

ezmemoar Jun 11, 2022
Author

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 Jun 12, 2022

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

https://jsfiddle.net/as0oLnuc/

ezmemoar Jun 12, 2022
Author

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 · 2023-09-15T13:27:16Z

kissu
Sep 15, 2023

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? 🤔).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

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

Uh oh!

ezmemoar Jun 10, 2022

Replies: 2 comments · 4 replies

Uh oh!

sqllyw Jun 10, 2022

Uh oh!

halivert Jun 10, 2022

Uh oh!

Uh oh!

ezmemoar Jun 11, 2022 Author

Uh oh!

sqllyw Jun 12, 2022

Uh oh!

ezmemoar Jun 12, 2022 Author

Uh oh!

Uh oh!

kissu Sep 15, 2023

ezmemoar
Jun 10, 2022

Replies: 2 comments 4 replies

sqllyw
Jun 10, 2022

ezmemoar Jun 11, 2022
Author

ezmemoar Jun 12, 2022
Author

kissu
Sep 15, 2023