时间戳

首页 > 解决方案 > 如何使用 Vue 为另一个 javascript 库赋值？

javascript - 如何使用 Vue 为另一个 javascript 库赋值？

问题描述

使用Vue，我从远程页面获取json值，可以打印到页面。

但是我必须将这些值转移到另一个 javascript 库中。我怎样才能做到这一点？

页面中的数据 v-for="dta in dataTable" 或 {{dataTable.height}} 等。我可以这样使用它。但是不可能在另一个javascript中使用“var graph like = {{dataTable.height}}”，我该怎么做？

我想我将不得不一次下一个工单。因为首先 vue 获取远程数据，然后其他 javascript 应该可以工作，因为值将来自 vue。

在此处输入图像描述

索引.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" />
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="apex/apexcharts.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;}
      #testGraph1 {width:400px;position: fixed;top:0;right:0;margin-right:500px;}
    </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">
        Height: {{dta.height}}, Type: {{dta.type}}

        <h3>Categories</h3>
        <ul v-for="dta2 in dta.graphData">
          <li>{{dta2.categorie}}</li>
        </ul>
        
        <h3>Series</h3>
        <ul v-for="dta2 in dta.graphData">
          <li>{{dta2.serie}}</li>
        </ul>

        
      </div>
      
      <div id='testGraph1'></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()
    }

})


var barBasicChart = {
  chart: {
    height: 350,  /*dta.height !Problem...*/
    type: 'bar',  /*dta.bar !Problem...*/
  },
  plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  series: [{
    data: [10,5,3]  /*dta.graphData.serie !Problem...*/
  }],
  xaxis: {
    categories: ['Test-1','Test-2','Test-3'], /*dta.graphData.categorie !Problem...*/
  },
  fill: {
    colors: '#ffcc33'
  }
}


var bar_basic_chart = new ApexCharts(
  document.querySelector("#testGraph1"),
  barBasicChart
);
bar_basic_chart.render();

数据Sql.asp

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

问题更新 (2021-04-12)

作为“var app = new Vue ({...})”，我将 vue 代码分配给名为 app 的变量。

我可以通过输入 app._data.title 来访问“数据：{title}”。

但有趣的是，我无法通过键入“data: {....dataTable: []....}”来访问 json。

“var vueDatas = [];vueDatas = app._data.dataTable;”

在此处输入图像描述

标签： javascriptjsonvue.js

解决方案

作为对我的评论的跟进，我发布了我最近构建的一个示例 Chart.js 项目中的组件。它展示了我在评论中描述的想法。它是使用 Vue CLI 用 Vue.js 2 编写的。

图表配置.js

const samplePieConfig = {
  type: 'pie',
  data: {
    datasets: [{
      data: [],
      backgroundColor: [
        'rgba(255, 0, 0, 0.8)',
        'rgba(0, 255, 0, 0.8)',
        'rgba(0, 0, 255, 0.8)',
      ]
    }],
    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
      'Red',
      'Green',
      'Blue'
    ]
  },
  options: {
    responsive: false
  }
}

export {
  samplePieConfig
}

ChartTest.vue

<template>
  <div class="chart-test">
    <h3>Chart Test</h3>
    <canvas id="chart-canvas" width="500" height="500" ref="chartref"></canvas>
  </div>
</template>

<script>
  import Chart from 'chart.js';
  import { samplePieConfig } from '@/chart-configurations.js'

  export default {
    data() {
      return {
        chartObj: null,
        chartConfig: samplePieConfig
      }
    },
    props: {
      chartData: {
        type: Array,
        required: true
      }
    },
    methods: {
      setChartData() {
        this.chartConfig.data.datasets[0].data = this.chartData;
      }
    },
    mounted() {
      this.setChartData();
      this.chartObj = new Chart(this.$refs.chartref, this.chartConfig);
    },
    // beforeDestroy() {
    //   // This necessary if canvas is reused for a new chart
    //   this.chartObj.destroy();
    // }
  }
</script>

应用程序.vue

<template>
  <div id="app">
    <chart-test v-if="dataReady" :chartData="pieChartData" />
  </div>
</template>

<script>
  import ChartTest from '@/components/ChartTest'

  export default {
    name: 'App',
    components: {
      ChartTest
    },
    data() {
      return {
        barChartData: [12, 19, 3, 5, 2, 3],
        pieChartData: [10, 20, 30],
        dataReady: true
      }
    },
    methods: {
      getData() {
        this.dataReady = true;
      }
    },
    mounted() {
      // Simulate API call
      setTimeout(this.getData(), 2000);
    }
  }
</script>

推荐阅读