want to remove the conditional comment 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
- 3Downvoters - Please prefer to put comment 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 community is not intend to make people lose their confident.Satyam Pathak– Satyam Pathak2019-05-27 07:46:04 +00:00Commented May 27, 2019 at 7:46
Add a comment |
2 Answers
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 comment 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 comment tags in DOM.
Make computed 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> 
Comments
a (hackish) workaround would be to set a <template v-else /> after your <sidebar v-if="showSidebarTrigger"> ... </sidebar>
