Using Curly Brackets for a value in Vue.js when using Flask as well

Question

My code was working just fine, then I decided to move it to flask. I'm using both Vue.js and Flask in my code. My html code is below:

<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
</head>

<body>
    <div id="app" class="container">
        <div class="row">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item" v-for="tab in tabs" v-bind:class="tab.active">
                            <a href="#" class="nav-link">{{ tab.name }}</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="row">
            <div class="col">
                <hr class="navbarDivide">
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="{{ url_for('static', filename='js/challenges.js') }}"></script>
</body>

</html>

When I remove the {{ tab.name }}, it works just fine. If I add the tab.name into the v-bind:class="tab.name", it displays the correct tab.name in the website. That's all proof that the vue.js works, and that everything should be working. Through that debugging, I've found that the problem is in the {{ tab.name }} (not the tab.name, but the brackets outside it). What's the solution for that?

My javascript is below:

var app = new Vue({
    el: '#app',
    data: {
        tabs: [
            { name: "Home", active: "" },
            { name: "Challenges", active: "active" },
            { name: "Scoreboard", active: "" },
            { name: "About", active: "" }
        ],
        challenges: finalChallenges
    }
});

Edit: I just realized why it may not be working. {{ something }} is a flask thing, and it overrides the vue.js. Is there a workaround?

score 7 · Accepted Answer · answered Dec 28 '18 at 03:25

Flask uses jinja as its templating language which also uses {{ variable }}

So when Flask renders the templates {{ tab.name }} becomes an empty string beacause tab.name is not a context variable in the current render.

You could use escaped brackets inside the brackets

{{ '{{ tab.name }}' }}

score 3 · Answer 2 · answered Sep 23 '21 at 08:44

Instead of writing long-expression like Minh Tri Le's answer. There is another way: You can change Vue.js templating delimiters like this answer

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 },
 delimiters: ['[[',']]']
})

and use like this:

 <div id="app">
     {{This is Jinja template declaration}}
     <!--Next is Vue.js declaration-->
     [[ message ]] 
    </div>

Using Curly Brackets for a value in Vue.js when using Flask as well

2 Answers2