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

Question

基本上我想做的是将变量从烧瓶传递给 vue.js，但似乎没有任何效果。到目前为止，我已经尝试了很多选项并从JavaScript raises SyntaxError with data rendered in Jinja template 提出了建议，但我的问题仍然存在。正是我想要做的是当从烧瓶传递参数 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

这里有几个问题...

1. 您已将 Vue 分隔符设置为使用 [[...]]，因此您应该使用

   [[ message ]]
   

   在你的 Vue 模板中

2. Flask 将 d_var 以 title_variable 的形式传递给 index.html，因此您应该在 {{...}} 中使用它，而不是 d_var

3. 您的 JavaScript 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"
     }
   })
   

   有关tojson()过滤器的信息，请参见此处~https://flask.palletsprojects.com/en/1.1.x/templating/#standard-filters