Still cannot assign a variable from flask to vue.js

Question

Basically what I want to do is to pass variable from flask to vue.js, but nothing seems to be working. So far I've tried a lot of options and suggested idea from JavaScript raises SyntaxError with data rendered in Jinja template but my problem is still here. Exactly what I'm trying to do is when passed argument d_var from flask, I want it to be displayed on html(title_variable) using vue.js.

VUE.JS CODE

var app = new Vue({
el: "#app",
delimiters : ['[[', ']]'],
data: {
    message: "Hello vue! (a dynamic thing)",
    title_variable = {{d_var}},
    indication true,
    j: "You should work harder"
}

HTML

<div id="app">
<p>
  {{ message }}
</p>
<p>
<span v-bind:title="title_variable">
  Show me some text...
</span>
</p>
</div>

FLASK

from flask import Flask, Response, jsonify, request, flash, 
render_template, 
import os
import json

app = Flask(__name__)

@app.route("/")
def home():
    d_var = 'ahahahah'
    return render_template("index.html", title_variable=d_var)


if __name__=="__main__": 
    app.secret_key=os.urandom(12)
    app.run(debug=True,host='0.0.0.0',port=5000)

Phil · Accepted Answer · 2019-08-22 23:49:20Z

1

Several problems here...

You've set your Vue delimiters to use [[...]] so you should use
```
[[ message ]]
```
in your Vue template
Flask is passing d_var to index.html as title_variable so that's what you should use within {{...}}, not d_var

Your JavaScript data object isn't valid. You should not be using = to assign property values. Try this instead

var app = new Vue({
  el: "#app",
  delimiters : ['[[', ']]'],
  data: {
    message: "Hello vue! (a dynamic thing)",
    title_variable: {{ title_variable|tojson }},
    indication: true,
    j: "You should work harder"
  }
})

See here for information on the tojson() filter ~ https://flask.palletsprojects.com/en/1.1.x/templating/#standard-filters

edited Aug 22, 2019 at 23:49

answered Aug 22, 2019 at 23:43

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

newnick988888 Over a year ago

Do you know why I can't output items from list in vue.js when pass list of values from flask?

Phil Over a year ago

Not without seeing code. You should probably create a new question

Ibrahim.H Over a year ago

@newnick988888 One more thing, it is always preferable to stick to only one template engine, in that case you're using Vue for rendering so you no longer need jinja from flask, see this full CRUD example.

Collectives™ on Stack Overflow

Still cannot assign a variable from flask to vue.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related