时间戳

首页 > 解决方案 > 使用 vue 将数据发送到另一个 javascript 库

html - 使用 vue 将数据发送到另一个 javascript 库

问题描述

使用 vue，我从 Sql Server 创建一个带有经典 asp 的 json 文件并导入数据。我的目标是将收到的数据放在页面和 apexCharts 中。

我使用的html页面，getData.js和dataSql.asp中的json如下。

索引.html

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="vue.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <style>      textarea {        position: fixed;        right: 0;        top: 0;        width: 300px;        height: 400px;      }    </style>
  </head>
  <body>
    <div id="app">
      <form id="urlParameterForm">
        <input type="date" name="startDate" id="startDate" />
        <input type="date" name="endDate" id="endDate" />
        <input
          type="number"
          name="pageNumber"
          id="pageNumber"
          value="1"
          v-on:input="changePage"
        />
        <input
          type="button"
          value="Filter"
          id="Filter"
          v-on:click="changeFilter"
        />
        <p>Page : {{ pageActive }}</p>
      </form>

      <h3>{{title}}</h3>
      <div v-for="dta in dataTable.sqlData">
        Height: {{dta.height}}, Type: {{dta.type}}

        <ul v-for="dta in dataTable.sqlData.graphData">
          <li>{{dta.categorie}} - {{dta.serie}}</li>
        </ul>
      </div>

      <textarea>
        {{dataTable}}
      </textarea>
    </div>

    <script src="getData.js"></script>
  </body>
</html>

获取数据.js

const app = new Vue({
    el: "#app",
    devtools: true,
    data: {
        dataTable: [],
        pageNumber: 1,
        pageActive :0,
        title:'Graph-1'
    },
    
    computed: {
        url() {
          return './dataSql.asp?pg=' + this.pageNumber
        }
    },
  
  
    methods: {

        changePage: function (event) {
            console.log('Change Page',this.pageNumber);
            this.pageNumber = event.target.value;
            this.init();
        },

        changeFilter: function (event) {
            console.log('Change Filter');
            this.init();
        },


        init() {
            let that = this;

            console.log('init call');
            $.ajax({
                type: "POST",
                url: that.url,
                data:{
                    startDate:$('#startDate').val(),
                    endDate:$('#endDate').val(),
                    pageNumber:$('#pageNumber').val()
                },
                success: function (data) {
                    console.log('data remote call');
                    console.log(data.sqlData);
                    that.dataTable = data.sqlData;
                }
            });

            
        }
    },
    

    mounted() {
        this.init()
    }

})

dataSql.asp 响应 json

        [
  {
    "height": 350,
    "type": "bar",
    "graphData": [
      {
        "categorie": "Bursa",
        "serie": 4
      },
      {
        "categorie": "Tekirdağ",
        "serie": 3
      }
    ]
  }
]

当我运行页面时，屏幕会像这样调用数据，我看到数据以 json 形式出现。 页

在 graph-1 文本下，没有显示任何内容，就好像我从未写过一样。但是我可以在右上角的文本字段中打印 json 文本。

      <div v-for="dta in dataTable.sqlData">
        Height: {{dta.height}}, Type: {{dta.type}}

        <ul v-for="dta in dataTable.sqlData.graphData">
          <li>{{dta.categorie}} - {{dta.serie}}</li>
        </ul>
      </div>

    <textarea>
        {{dataTable}}
      </textarea>

我实际上想将无法在页面上显示的数据分配给此处的 x 和 y 变量。

我需要类似下面的东西。

categories: app.dataTable.graphData.categorie;
series: app.dataTable.graphData.serie;

var barBasicChart = {
  chart: {
    height: 350,
    type: 'bar',
  },
  plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  series: [{
    data: [4,3]  /* vue - json - graphData.serie */
  }],
  xaxis: {
    categories: ['Bursa','Tekirdağ'], /* vue - json - graphData.categories */
  },
  fill: {
    colors: $themeColor
  }
}


// Initializing Bar Basic Chart
var bar_basic_chart = new ApexCharts(
  document.querySelector("#denemeGrafik"),
  barBasicChart
);
bar_basic_chart.render();

Vue 好像很久没开发了。我也是 vuede 的新手。我的目标是从 json 自动生成 html 内容。更改我使用过的脚本的变量（例如 apexcharts、xGrid 等）。

你能建议我是否可以使用另一个 javascript 库来做这些事情吗？

除了 React 和 Angular，因为这两个很难理解和编写。

标签： htmlvue.jsrenderapexcharts

解决方案

您的 AJAX 回调分配dataTable给data.sqlData：

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data.sqlData;
  }
})

然后，您的组件尝试渲染dataTable.sqlData，但sqlData已经在 AJAX 回调（dataTable是一个Array）中提取：

<div v-for="dta in dataTable.sqlData">
                             ^^^^^^^ ❌

解决方案：您可以更新 AJAX 回调以返回完整响应（包括sqlData）：

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data;
  }
})

...或将模板更新为 not dereference sqlData，dataTable直接使用：

<div v-for="dta in dataTable">

推荐阅读