这是一个创建于 2538 天前的主题，其中的信息可能已经有所发展或是发生改变。
被折磨一天了，用 axios 请求的数据死活不能填充到 v-charts 里面，代码如下：
<template>
<el-contaner>
<el-header>
<TopBar></TopBar>
</el-header>
<el-main>
<div class="dashbraod">
<ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
</div>
</el-main>
</el-contaner>
</template>
<style>
.dashbraod{
position: relative;
}
</style>
<script>
import TopBar from './Navbar'
import axios from 'axios'
import { Message } from 'element-ui'
export default {
name: 'Console',
data () {
return {
chartData: {
rows: [],
columns: ['id', 'total']
},
chartSettings: {
dimension: 'id',
metrics: 'total'
}
}
},
components: {
TopBar
},
method: {
},
created: function () {
alert('Be mounted')
axios.get('http://localhost/data/Statistic').then(function (res) {
for (let i = 0; i < res.data.length; i++) {
this.chartData.rows.push(res.data[i])
}
}).catch(function (res) {
Message.error(res.toString())
})
alert(this.chartData.rows)
}
}
</script>
请教各位，怎么改才能将 axios 的数据填充到chartData.rows里面呢？
第 1 条附言 · 2017-12-12 07:14:39 +08:00
终于解决了，首先来说axios，必须用"=>"来推导值，然后再data ()函数过程中写入相关的值。
代码示例：
data () {
return {
/* 这里申明模板数据属性*/
chartData: {
columns: ['id', 'sum'],
rows: []
}
}
}
第二部分在created生命周期里面写入请求函数
created () {
// let ctx = this.loadData()
axios.get('http://localhost:8088/g').then(response => {
let res = response.data
//请注意这里不能直接赋值，需要将数据依次插入到数据对象里面，不然会出现数据类型不正确
for (let i = 0; i < res.msg.length; i++) {
this.chartData.rows.push(res.msg[i])
}
})
this.chartSettings = {
dimension: 'id',
metrics: 'sum'
}
}
 |
1
zhoulouzi 2017-12-11 20:14:46 +08:00  1
目测 this，毕竟没写过前端
|
 |
2
wwqgtxx 2017-12-11 20:32:58 +08:00 via iPhone
把 then 后面的 function 换成剪头函数，而且我记得在 created 中是不能修改数据的，要在 mounted 之后
|
 |
3
TimRChen 2017-12-11 20:33:50 +08:00
没找到你用的 v-chart...不过我认为此处可以把 v-bind:data=""改成 v-modal=""
|
 |
5
SlipStupig OP @wwqgtxx 我其实只是想填充一下数据画一个“饼图”，但是似乎只要动态填充就不行 !=_=
|
|
6
SlipStupig OP |
|
7
TimRChen 2017-12-11 20:36:45 +08:00
|
|
8
TimRChen 2017-12-11 20:37:57 +08:00
const _self = this;
应该可解决问题 |
|
9
SlipStupig OP @TimRChen 问题的重点不是 this 的问题，而是图画不出来.....
|
|
11
TimRChen 2017-12-12 00:04:08 +08:00 via Android
@SlipStupig 在 axios 里的回调函数中 this 值为 undefined，但此程序明显是想把数据存储存储到 chartData.row 中，但此时你的 this 指向的并不是 vue 实例，所以 chartData.row 也是 undefined，也就是说，你的数据传递发生了问题。
|
|
12
TimRChen 2017-12-12 00:06:21 +08:00 via Android 1
我倒是建议你先尝试下在生命周期函数中先把 this 存入一个变量中，然后操作这个变量看下结果
|
 |
13
l12ab 2017-12-12 00:37:42 +08:00 via iPhone
说句题外话，el-main 在 ie11 下只显示一点点的高度，如何解决的
|
|
14
SlipStupig OP @l12ab 修改绑定样式 :style
|
Select Language