I have a django project and I want to start adding Vue.js elements into it, but there is a big overarching issue before I can really start in that custom delimiters (template tags) do not work in the firefox browser only Chrome, I can change them from curly braces to square brackets, but in firefox it just renders the code not the message. The following code is not part of my django project, it is just example code to demonstrate the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello [[ message ]]</p>
</div>
<script>
new Vue({
delimiters: ["[[","]]"],
el: '#app',
data() {
return {
message: 'Hello World'
};
}
});
</script>
</body>
</html>
So this code renders the following in Chrome:
Hello World!
And in Firefox, it renders the code:
[[ message ]]
I'm assuming there is a fix for this, as I almost never see rendered code in websites and I'm assuming Vue is popular, how do other developers get around this issue?
question from:
https://stackoverflow.com/questions/65887480/vue-custom-delimiters-not-working-in-firefox 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
