I am facing a problem with user-supplied text retrieved from a CMS. The issue arises when the string contains a simple apostrophe ('), causing the entire string to break and throw an error. I am currently searching for a solution to prevent Vue from getting stuck on this problem, but I seem to have reached a dead end. Even though I suspect it might be something obvious that I am missing. Here is the code snippet:
<span v-html="sidebarContent"></span>
<script>
var app = new Vue({
el: '#app',
data: {
// the content below represents what is outputted by a server-side rendered variable "@Html.Raw(@Model.Element("BodyCopy").Value)"
sidebarContent: '<p>This is example text of what's being returned.</p>',
},
})
</script>
The main issue seems to be the presence of the word "what's," particularly the use of the apostrophe. Users frequently input full sentences where such apostrophes appear quite often, so the data handling should account for this. Any suggestions on how to achieve this?
Moreover, the error message displayed is: "Uncaught SyntaxError: Unexpected identifier"