title: Using Curly Brackets for a value in Vue.js when using Flask as well
body: <p>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:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
          crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app" class="container"&gt;
          &lt;div class="row"&gt;
              &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
                  &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
                      &lt;ul class="navbar-nav"&gt;
                          &lt;li class="nav-item" v-for="tab in tabs" v-bind:class="tab.active"&gt;
                              &lt;a href="#" class="nav-link"&gt;{{ tab.name }}&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;hr class="navbarDivide"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;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"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;script src="{{ url_for('static', filename='js/challenges.js') }}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I remove the <code>{{ tab.name }}</code>, it works just fine. If I add the <code>tab.name</code> into the <code>v-bind:class="tab.name"</code>, 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 <code>{{ tab.name }}</code> (not the tab.name, but the brackets outside it). What's the solution for that?</p>
  
  <p>My javascript is below:</p>
  
  <pre><code>var app = new Vue({
      el: '#app',
      data: {
          tabs: [
              { name: "Home", active: "" },
              { name: "Challenges", active: "active" },
              { name: "Scoreboard", active: "" },
              { name: "About", active: "" }
          ],
          challenges: finalChallenges
      }
  });
  </code></pre>
  
  <p><strong>Edit:</strong> I just realized why it may not be working. <code>{{ something }}</code> is a flask thing, and it overrides the vue.js. Is there a workaround?</p>