possibly null expression inside v-if guard

[MuTsunTsai]

I notice that expressions inside v-if are rendered one more time as v-if condition becomes false, and this is quite bothering as I can't then use v-if as a null guard like I can in Vue. Here is a minimal example; an error will shown in the console after 3 seconds.

<div v-scope v-cloak>
  <div v-if="store.obj">
    <!-- supposedly, store.obj is not null from here -->
    <div v-for="i in store.obj.arr">{{i}}</div>
  </div>
</div>

<script>
const { createApp, reactive } = PetiteVue;
const store = reactive({
  obj: {
    arr: [1, 2, 3],
  },
});
createApp({ store }).mount();

setTimeout(() => store.obj=null, 3000); // error!
</script>

See this codepen.

[Dece0]

Any idea how to fix it? I have same problem with v-if.

[MuTsunTsai]

My current workaround is like this:

<div v-scope v-cloak>
  <div v-if="store.obj">
    <div v-for="i in arr">{{i}}</div>
  </div>
</div>

<script>
const { createApp, reactive } = PetiteVue;
const store = reactive({
  obj: {
    arr: [1, 2, 3],
  },
});
createApp({
  store,
  get arr() {
    if(!store.obj || !store.obj.arr) return []; // fallback
    return store.obj.arr;
  }
}).mount();

setTimeout(() => store.obj=null, 3000); // no more error
</script>

[Dece0]

Thank you for your reply. I fixed it similarly. I hope that someone will fix this bug in next version because it's annoying.

[terryaney]

Not great, but another workaround for your sample could be using the obj?.arr in the v-for. Just came across same bug tonight and was going to post a question and see you beat me to it :)

<div v-scope v-cloak>
  <div v-if="store.obj">
    <!-- supposedly, store.obj is not null from here -->
    <div v-for="i in store.obj?.arr">{{i}}</div>
  </div>
</div>

[terryaney]

One more solution I used instead. Instead of v-if checking an 'object' undefined, I never set the object to undefined once it has been set. instead, I had a 'bool' property that I kept 'in sync'.

<div v-scope v-cloak>
  <div v-if="store.showObj">
    <!-- supposedly, store.obj is not null from here -->
    <div v-for="i in store.obj.arr">{{i}}</div>
  </div>
</div>

<script>
const { createApp, reactive } = PetiteVue;
const store = reactive({
  obj: {
    arr: [1, 2, 3],
  },
  showObj: true
});
createApp({ store }).mount();

setTimeout(() => store.showObj = false, 3000); // error!
</script>

Then you don't have to sprinkle ?. protection ... especially if you have lots of access against your object inside the v-if.