使用 vue 将数据发送到另一个 javascript 库
Send data to another javascript library with vue
使用 vue,我使用来自 Sql 服务器的经典 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 形式出现。
在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 因为这两个很难理解和编写。
您的 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 回调更新为 return 完整响应(包括 sqlData
):
$.ajax({
//...
success: function (data) {
that.dataTable = data;
}
})
...或更新模板以不取消引用 sqlData
,直接使用 dataTable
:
<div v-for="dta in dataTable">
使用 vue,我使用来自 Sql 服务器的经典 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 形式出现。
在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 因为这两个很难理解和编写。
您的 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 回调更新为 return 完整响应(包括 sqlData
):
$.ajax({
//...
success: function (data) {
that.dataTable = data;
}
})
...或更新模板以不取消引用 sqlData
,直接使用 dataTable
:
<div v-for="dta in dataTable">