javascript - Remove comment markup generated by a v-if condition - Stack Overflow

want to remove the conditional ment markup ( ) from the HTML

I am using a condition for example

<sidebar v-if="showSidebarTrigger"> ... </sidebar>

when the condition is false in dom generated i wanted that to remove

want to remove the conditional ment markup ( ) from the HTML

I am using a condition for example

<sidebar v-if="showSidebarTrigger"> ... </sidebar>

when the condition is false in dom generated i wanted that to remove

• javascript
• vuejs2

Share Follow asked May 27, 2019 at 7:39 Umer KhanUmer Khan 26722 silver badges55 bronze badges 1

• 3 Downvoters - Please prefer to put ment whenever you downvote question/answer, it helps people to understand what's wrong and can modify their mistakes- Else people feel less confident and hesitate to ask anything or contribute next time. And munity is not intend to make people lose their confident. – Satyam Pathak Commented May 27, 2019 at 7:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is what I found said by Evan You on related Github issue

v-if is usually used for elements in a relatively stable node structure, rendering it to empty ment tags makes vnode lists diffing more efficient as the lists are more "stable", and it avoids some edge cases when elements are not keyed.

As stated in the statement further- a related workaround will work here - you can usev-for as an alternative if you don't want lots of such ment tags in DOM.

Make puted property say displaySideBar and push your showSidebarTrigger conditionally in array and return it.

displaySideBar() {
let showSideBar = []
  if(showSidebarTrigger) {
    showSideBar.push(showSidebarTrigger)
  }
}

Now in your html section

<div v-for="(sideBar, index) in displaySideBar" :key="`sideBar-${index}`">
   <h1> Hey </h1>
</div>

a (hackish) workaround would be to set a <template v-else /> after your <sidebar v-if="showSidebarTrigger"> ... </sidebar>