将瓶子变量直接传递给vue的最佳方法是什么？

问题描述：

我正在使用瓶服务器和vue.js前端的vizualisation应用程序。将瓶子变量直接传递给vue的最佳方法是什么？

关于这个问题的类似问题寻找一种方法来使vue.js和烧瓶变量语法不会冲突，如here所示。

在我的情况，我想知道是否有反正直接分配vue.js变量data.d与从Flask render_template方法发送变量。

var app = new Vue({ 
     el: '#app', 
     data: { 
     'd': {{Flask-variable}} 
     }, 
})

下面是代码

烧瓶

import os 
import flask 
import json 
from flask import Flask, render_template, request, redirect, url_for 
from script_python import kernel as K 


def App(): 
    # Initialize the Flask application 
    app = Flask(__name__) 
    app.config.from_object('marianaViz.config.ConfigClass') 

    #return index.html on load 
    @app.route('/') 
    def index(): 
     d = [{'x':1, 'y':0, 'z': 1},{'x':1, 'y':0, 'z': 2}] 
     return flask.render_template("histogram.html",d= flask.jsonify(**K.JSONResponse(data = d,error=False,message=''))) 

    return app

var app = new Vue({ 
    el: '#app', 
    data: { 
    'd':{{ d.data|tojson|safe}}, 
    }, 
    created:function(){ 
     this.drawHistogram(d), 
     }, 
    methods:{ 
    // Called when the Visualization API is loaded. 
    drawHistogram: function(){ 
     var data = null; 
     var graph = null; 
     var self = this; 


     // Create and populate a data table. 
     console.log(d); 
     data = self.d; 
     //data = [{x:1, y:0, z: 1},{x:1, y:0, z: 2},{x:2, y:0, z: 3},{x:3, y:0, z: 2},{x:4, y:0, z: 1},{x:5, y:0, z: 1},{x:6, y:0, z: 2},{x:7, y:0, z: 3},{x:8, y:0, z: 2},{x:9, y:0, z: 1},{x:10, y:0, z: 1},{x:11, y:0, z: 2},{x:12, y:0, z: 3},{x:13, y:0, z: 2},{x:14, y:0, z: 1},{x:15, y:0, z: 1},{x:16, y:0, z: 2},{x:17, y:0, z: 3},{x:18, y:0, z: 2},{x:19, y:0, z: 1}]; 

     // create some nice looking data with sin/cos 

     /* 
     function custom(x, y) { 
     return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10); 
     } 
     var steps = 4; // number of datapoints will be steps*steps 
     var axisMax = 15; 
     var axisStep = axisMax/steps; 
     for (var x = 0; x <= axisMax; x+=axisStep) { 
      for (var y = 0; y <= axisMax; y+=axisStep) { 
      var z = custom(x,y); 
       data.push({x:x, y:0, z: z}); 
      } 
      console.log(data); 
     } 
     */ 

     // specify options 
     var options = { 
      width: '300px', 
      height: '300px', 
      style: 'bar', 
      xBarWidth: 0.5, 
      yBarWidth: 0.5, 
      showPerspective: true, 
      showGrid: true, 
      showShadow: false, 
      "showYAxis":false, 
      "xLabel":'', 
      "zLabel":'', 
      cameraPosition: { 
       horizontal: 0*3.14, 
       vertical: 0*3.14, 
       distance: 1.8 
      }, 
      legendLabel: '', 
      keepAspectRatio: true, 
      verticalRatio: 0.5, 
      "backgroundColor":'black', 
      "showLegend": true, 
      "xCenter":'50%', 
     }; 

     var camera = graph ? graph.getCameraPosition() : null; 

     // create our graph 
     var container = document.getElementById('histogram'); 
     graph = new vis.Graph3d(container, data, options); 

     if (camera) graph.setCameraPosition(camera); // restore camera position 


    } 

    } 
})

HTML

<!doctype html> 
<html> 
    <head> 
    <!--Vuejs--> 
    <script type="text/javascript" src="{{url_for ('static',filename='js/vue.js')}}"></script> 
    <!--css--> 
    <link href="{{url_for ('static',filename='css/disp.css')}}" rel="stylesheet" type="text/css"/> 
    <!--Vis visualisation lib--> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script> 
    <!--<script type="text/javascript" src="/front/lala_web/vis.js"></script>--> 

    </head> 

    <body> 

     <div id="app"> 
      <h2>Histogram:</h2> 
      <div id="histogram"></div> 
     </div> 
    </body > 
     <!--display.js--> 
     <script type="text/javascript" src="{{url_for ('static',filename='js/histogram.js')}}"></script> 

</html>

答

我想你可以做这样的事情

'd':{{ flask_variable|tojson|safe }}

的粗

您的变量将需要JSON可序列化

你可能有实际解析JSON回JS

JSON.parse('{{ flask_variable|tojson|safe }}')（至少像），它必须是一个可以转换为JSON的对象（即Python类可能不会工作...字符串和数字应该）

你好乔兰，谢谢你的关注。我试过了你的解决方案，但是我得到了一个SyntaxError：{{flask_variable | tojson | safe}}的无效属性ID。我已经编辑我的问题来添加代码，以防问题出现在别的地方。 –

使用JSON.parse（'{{flask_variable | tojson | safe}}'）=>“y \”时，我在js端得到了一些奇怪的输出：=“”0，=“”\“x \”：=“ “1，=”“z”：=“”1}，=“”{\“y \”：=“”2}]}“'）=”“> –

似乎问题来自使用vuejs。它在纯js中工作... –

答

你有很多选项，我会告诉你4为简单的数据工作类型（int，字符串等），并与再努力一点，你也可以让他们更复杂的数据类型的工作（数组，对象等）

使用内嵌的JavaScript

就分配变量在脚本标签

<script type="text/JavaScript"> 
#some var from flask 
    var d_var = "{{somevalue}}" 
</script>

然后在你Vue脚本，你可以做

var vm = new Vue({ 
    el: '#demo', 
    data: { 
    d: d_var 
    ...

其余的步骤涉及将变量分配给DOM元素的属性（例如，GA隐藏的输入）

使用jQuery

创建具有其值主要VUE DOM元素设置为您的烧瓶变量内的隐藏输入

<input name="d_elem" type="hidden" value="{{somevalue}}" id="d_elem" />

然后在你的Vue脚本，你现在可以做

var d_var = $("#d_elem").val(); 
var vm = new Vue({ 
    el: '#demo', 
    data: { 
    d: d_var 
    ...

使用老式的getElementById

如果你受苦JS库疲劳，只需要创建一个隐藏的输入像以前一样，但是这个时候你做

var d_var = document.getElementById("d_elem").value; 
var vm = new Vue({ 
    el: '#demo', 
    data: { 
    d: d_var 
    ...

使用VM。$裁判

与ref属性创建隐藏的输入

<input name="d_elem" type="hidden" value="{{somevalue}}" ref="d_elem" />

甲在vue实例内使用它，如

var d_var = this.$refs.d_elem.value ;

开始=>

将瓶子变量直接传递给vue的最佳方法是什么？

相关推荐