Question

基本上我想做的是将烧瓶中的变量传递给vue.js，但似乎没有任何效果。到目前为止，我已经尝试了JavaScript raises SyntaxError with data rendered in Jinja template中的许多选项和建议，但是我的问题仍然存在。正是我想要做的是从flask传递参数d_var时，我希望使用vue.js将其显示在html（title_variable）上。

VUE.JS代码

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>

烧瓶

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)

Answer 1

这里有几个问题...

您已将Vue分隔符设置为使用[[...]]，因此您应该使用
```
[[ message ]]
```
在您的Vue模板中
烧瓶将d_var的{{1}}传递给index.html，因此您应该在title_variable而不是{{...}}
< / li>
您的JavaScript d_var对象无效。您不应该使用data来分配属性值。试试这个
```
=
```
有关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" } })过滤器〜https://flask.palletsprojects.com/en/1.1.x/templating/#standard-filters

仍然无法将烧瓶中的变量分配给vue.js

1 个答案: