Menu
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?
522
Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.
tldr; JSX (React's language) is a superset of JavaScript (where class is a reserved keyword), while Vue and Svelte both have templating languages which are supersets of HTML, thus allowing the use of class as you would in HTML.
In Vue. js, components can be written in HTML, CSS, and JavaScript without dividing them into separate files.
Create a backend flask app to connect with Vue.js. To learn the basics and get started with vue.js click here. To serve flask as backend, create a flask app to write all the API.
In javascript code, curly brackets are used to declare an object. Objects in javascript follow this formula- So anywhere you see {} in a code, the statement the follows the left “ {“ is the key and the statement that follow the “:” is the value which could be a string, integer, array e.t.c 3.) In javascript code 2
As you become more invested in your websites and web apps, you'll probably want to add more client-side functionality and reactivity to them. Modern web development typically achieves this through the use of front-end frameworks, and one such framework that is quickly rising in popularity is Vue (also known as Vue.js or VueJS).
Modern web development typically achieves this through the use of front-end frameworks, and one such framework that is quickly rising in popularity is Vue (also known as Vue.js or VueJS).
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 }}' }}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
