I am currently working with this Vue code snippet:
<script>
var starting_point = '{{ form.content.data }}';
vm = new Vue({
el: '#editor',
data: {
input: starting_point
},
computed: {
compiledMarkdown: function () {
console.log(marked(this.input,{sanitize:true}));
return marked(this.input, { sanitize: true });
}
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value
}, 300)
}
});
This code is based on the basic example found in the Vue.js documentation: https://v2.vuejs.org/v2/examples/
While it functions well for shorter sentences, I have encountered issues when dealing with longer blog posts that contain custom elements like emojis and line breaks. The JavaScript variable seems to break in such cases. For example, I observe output similar to this:
var starting_point = '# fourthwhat is this?
;o
how bout dat. ';
And I receive an error message:
2:40 Uncaught SyntaxError: Invalid or unexpected tokenTherefore, I am exploring options to properly stringify or sanitize the content so that it can be safely used as a JavaScript variable within Vue. Any suggestions on how to achieve this and ensure Vue can interpret the content correctly?