Vue html comment handling - html

Question

I'm using Vue to produce some html template, I need to include the html conditional comments as per code below.
var productTemplate = new Vue({
el: '#myApp'
});
<script src="https://unpkg.com/vue#2.5.8/dist/vue.js"></script>
<div id="myApp">
<div class="some-content">
This is some content
</div>
<!--[if mso]>
<div>
this div will only be shown if the condition in the comment is true, in this case the condition is:
if ( mso (microsoft office) == the html rendering engine) {
show the html code between the [if mso] and the [endif]
}
</div>
<![endif]-->
<div class="some-other-content">
This is some content
</div>
</div>
But when I open my html page in the browser the html code between the conditional comment is completely removed even though I actually need it to be there.
How can I make Vue include these comments in the template's view?

Answer 1

In Vue 2.4.0+, you can set the comments option to true inside the component if you want to preserve comments in the component's template.
var productTemplate = new Vue({
comments: true, // <-- Add this
el: '#myApp'
});

Answer 2

Vue does delete the HTML comment.
One way I can think of is to bind your comments in a variable and output the variable through v-html directive.
EDIT: I tested it in a wrong dev env, so here is a link about the question from the Vue.js GitHub issue. https://github.com/vuejs/vue/issues/6177
var productTemplate = new Vue({
el: '#myApp',
comments: true,
data: {
comments: ` <!--[if mso]>
<div>
this div will only be shown if the condition in the comment is true, in this case the condition is:
if ( mso (microsoft office) == the html rendering engine) {
show the html code between the [if mso] and the [endif]
}
</div>
<![endif]-->`
}
});
<script src="https://unpkg.com/vue#2.5.8/dist/vue.js"></script>
<div id="myApp">
<div class="some-content">
This is some content
</div>
<!-- Comments -->
<div v-html="comments"> {{ comments }} </div>
<div class="some-other-content">
This is some content
</div>
</div>