Fatal编程技术网
  • javascript/
  • 如何使用Vue为另一个javascript库赋值？

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

javascript json vue.js

如何使用Vue为另一个javascript库赋值？,javascript,json,vue.js,Javascript,Json,Vue.js,使用Vue，我可以获得json值​​从远程页面，我可以将其打印到该页面 但我必须转移这些价值观​​到另一个javascript库。我该怎么做 页面v-for=“dta in dataTable”或{{dataTable.height}}等中的数据。我可以这样使用它。但是在另一个javascript中不可能使用“var-graph-like={{{dataTable.height}}”，我该怎么做呢 我想我得一个一个地下达工作指令。因为首先vue获取远程数据，然后其他javascript应该可以工

使用Vue，我可以获得json值​​从远程页面，我可以将其打印到该页面

但我必须转移这些价值观​​到另一个javascript库。我该怎么做

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

我想我得一个一个地下达工作指令。因为首先vue获取远程数据，然后其他javascript应该可以工作，因为​​将来自vue

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" />
    <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>
dataSql.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.\u data.title来访问“data:{title}”

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

“var vueDatas=[]；vueDatas=app.\u data.dataTable；”

作为我评论的后续，我发布了我最近构建的示例Chart.js项目的组件。这表明了我在评论中描述的想法。它是使用Vue CLI在Vue.js 2中编写的

chart-configurations.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>


图表测试
从“Chart.js”导入图表；
从“@/chart configurations.js”导入{samplePieConfig}
导出默认值{
数据（）{
返回{
chartObj:null，
chartConfig:samplePieConfig
}
},
道具：{
图表数据：{
类型：数组，
必填项：true
}
},
方法：{
setChartData（）{
this.chartConfig.data.datasets[0]。data=this.chartData；
}
},
安装的（）{
这是.setChartData（）；
this.chartObj=新图表（this.$refs.chartref，this.chartConfig）；
},
//在…之前{
////如果画布被重新用于新图表，则这是必需的
//this.chartObj.destroy（）；
// }
}
App.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>


从“@/components/ChartTest”导入ChartTest
导出默认值{
名称：“应用程序”，
组成部分：{
图表测试
},
数据（）{
返回{
条形图数据：[12,19,3,5,2,3]，
Piechart数据：[10,20,30]，
dataReady：对
}
},
方法：{
getData（）{
this.dataReady=true；
}
},
安装的（）{
//模拟API调用
setTimeout（this.getData（），2000）；
}
}
因为您有一个异步请求，所以在获取数据表之前，您无法访问它 按如下方式更改ajax请求：

$.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;
        that.$emit('data-fetched'); // fire an event when data was ready to use
    }
});

app.$on('data-fetched', function(){
  console.log(app.$data.dataTable)
});
在Vue实例之外，您可以像这样监听该事件：

$.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;
        that.$emit('data-fetched'); // fire an event when data was ready to use
    }
});

app.$on('data-fetched', function(){
  console.log(app.$data.dataTable)
});
这应该是可行的

尝试将barBasicChart（或bar_basic_chart）作为视图数据属性：
data（）{return{barBasicChart:null}
然后初始化
mounted（）{this.barBasicChart=…}
您的响应只返回一项？例如，您总是使用一个
对象获得
sqlData
数组？类似这样的
sqlData:[{…}]
或
sqlData:[{…}，{…}，{…}]
@Tim您提供的代码是vue next，我想我不知道如何将我的代码转换为vuejs 2 vue next。@admasoudi sqlData包含多个值。sqlData.graphData为我提供了值​​受目录和系列约束的。