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

Posted 2023-02-22

【中文标题】仍然无法将变量从烧瓶分配给 vue.js

【英文标题】：Still cannot assign a variable from flask to vue.js

【发布时间】：2019-12-28 06:45:55

【问题描述】：

基本上我想做的是将变量从烧瓶传递给 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)

【参考方案1】：

这里有几个问题...

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

[[ message ]]

在你的 Vue 模板中

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

您的 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

【讨论】：

你知道为什么我在从flask传递值列表时无法从vue.js中的列表中输出项目吗？

不是没有看到代码。您可能应该创建一个新问题

@newnick988888 还有一件事，最好只使用一个模板引擎，在这种情况下，您使用 Vue 进行渲染，因此您不再需要烧瓶中的 jinja，请参阅完整的 CRUD @ 987654322@.