I need a way to switch between v-html and plain text in Vue.js v2. Here's what I have so far:
HTML
<div id="app">
<h2 v-html="html ? text : undefined">{{html ? '' : text}}</h2>
<button @click="toggle">
switch
</button>
</div>
JS
new Vue({
el: "#app",
data: {
text:"Hello<br/>World",
html:false
},
methods: {
toggle: function(){
this.html = !this.html;
}
}
})
This code does not work when html is false. Can anyone suggest a solution that avoids repeating the <h2> tag using v-else? Ideally, I would like to achieve this with just one <h2> tag.
Thank you!