时间戳

首页 > 解决方案 > 仍然无法将变量从烧瓶分配给 vue.js

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

问题描述

基本上我想做的是将变量从烧瓶传递给 vue.js，但似乎没有任何效果。到目前为止，我已经尝试了很多选项，并且从JavaScript 提出的建议会在 Jinja 模板中渲染数据引发 SyntaxError但我的问题仍然存在。我想要做的是当从烧瓶传递参数 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)

标签： vue.jsflask

解决方案

这里有几个问题...

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

    [[ message ]]

    在你的 Vue 模板中

  2. Flask 传递d_var给index.htmlastitle_variable所以你应该在其中使用{{...}}，而不是d_var

  3. 您的 JavaScriptdata对象无效。您不应该使用=来分配属性值。试试这个

    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

推荐阅读