Question

在将数据传递到已安装部分中的函数myChart时遇到麻烦。我是vuejs的新手，在理解问题时遇到了一些困难。我想在标签和数据集中传递数据，这些数据是从我的函数中调用的。有人可以帮忙吗？提前致谢代码：

<script>
import Chart from 'chart.js';
    export default {
        data() {
            return {
                tests:[]
            };
        },
        created(){
            this.mine();

        },
          methods: {
            mine(){
                let self = this;
                this.$http.get('tests/mine').then(response=>{
                    self.tests = response.data.tests;
                }).then(error=>{
                    console.log(error) ;
                });
            }},
            mounted() {
            var self=this;
            var ctx = document.getElementById("weightchart");
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: test.dt_test,
                    datasets: [{
                        label: 'weight',
                        data: test.weight,
                        backgroundColor: [
                            'rgba(255, 255, 255, 0)',
                            'rgba(255, 255, 255, 0)',
                            'rgba(255, 255, 255, 0)',
                            'rgba(255, 255, 255, 0)',
                            'rgba(255, 255, 255, 0)',
                            'rgba(255, 255, 255, 0)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
            },

        computed: {},
        watch: {}


    }
</script>

Answer 1

代替为异步调用创建另一个函数，您可以在安装的内部添加get调用，并在.then（）函数的返回中创建您的图表并执行其他操作。

其他方法可能是您从方法中返回promise对象，然后在其.done（）方法上编写已装入的代码逻辑。

Answer 2

您的代码很好。从服务器获取数据之前，代码正在执行完毕。当您调用方法mine（）时，它正在异步发送HTTP请求。但是您的Vue代码不会等待它将得到的响应。相反，它将继续运行脚本的其余部分。到服务器收到响应时，Vue已经用空白数据初始化了图表。

因此，您必须确保从服务器成功获取数据后初始化图表。从服务器获取数据后，将初始化代码放入方法中并调用该方法-

            this.$http.get('tests/mine').then(response=>{
                self.tests = response.data.tests;
                // initialize your chart here, like -
                // this.initChart();
            }.bind(this)).then(error=>{
                console.log(error) ;
            });

将数据从数组传递到函数vue

2 个答案: