使用 vue

如何解决使用 vue

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

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

index.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>

getData.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 形式出现。

在图 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 除外，因为这两个很难理解和编写。

解决方法

您的 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;
  }
})

...或更新模板以不取消引用 sqlData，直接使用 dataTable：

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

如何解决使用 vue

解决方法

相关推荐