无法将我的数据传递给 mount() 方法

Question

我对 Vue 还很陌生，所以请原谅我的愚蠢！！

谁能告诉我我在下面的代码中做错了什么，这会阻止我从 mount() 方法中获取我的“series_interactions_daily”变量数据吗？我在 console.log()'ing 它，但没有显示！不过，我可以将“series_interactions_daily”打印到 HTML 屏幕中！

    <script>

    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    export default {
        mounted() {
            let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);

            chart.paddingRight = 20;

            let dummydata = [];
            let visits = 10;
            for (let i = 1; i < 366; i++) {
            visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
            dummydata.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
            }

            chart.data = dummydata;
            console.log(this.series_interactions_daily);

            let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.grid.template.location = 0;

            let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.tooltip.disabled = true;
            valueAxis.renderer.minWidth = 35;

            let series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.dateX = "date";
            series.dataFields.valueY = "value";

            series.tooltipText = "{valueY.value}";
            chart.cursor = new am4charts.XYCursor();

            let scrollbarX = new am4charts.XYChartScrollbar();
            scrollbarX.series.push(series);
            chart.scrollbarX = scrollbarX;

            this.chart = chart;
        },

        beforeDestroy() {
            if (this.chart) {
                this.chart.dispose();
            }
        },
        data() {
            return {
                campaign_id: this.$route.params.campaign_id,
                campaign: [],
                dateranges: [],
                total_interactions: '',
                average_daily_interactions: '',
                series_interactions_daily: [],
            }
        },
        methods: {
            onChange(event) {

                this.$router.push('?range=' + event.target.value);

                this.$http.get('https://dev.local/api/portal/campaign/' + this.campaign_id + '?range=' + event.target.value)
                .then(function(data){
                    return data.json();
                }).then(function(data){
                    this.campaign = data.campaign;
                    this.dateranges = data.dateranges;
                    this.total_interactions = data.totalInteractions;
                    this.average_daily_interactions = data.averagreDailyInteractions;
                    this.series_interactions_daily = data.interactions_per_day.stats.interaction.daily;
                });

            }
        },
        created() {
            this.$http.get('https://dev.local/api/portal/campaign/' + this.campaign_id + '?' + this.axiosParams)
            .then(function(data){
                return data.json();
            }).then(function(data){
                this.campaign = data.campaign;
                this.dateranges = data.dateranges;
                this.total_interactions = data.totalInteractions;
                this.average_daily_interactions = data.averagreDailyInteractions;
                this.series_interactions_daily = data.interactions_per_day.stats.interaction.daily;
            });
        },
        computed: {
            axiosParams() {
                const params = new URLSearchParams();
                if(this.$route.query.range) params.append('range', this.$route.query.range);
                return params;
            }
        },
        filters: {

        },
        directives: {

        },

    }
</script>

编辑

好的，所以我创建了一个从mounted(){} fetchData() 的方法 - 但是我仍然没有得到我的“series_interactions_daily”变量数据！

<script>

    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    export default {
        mounted() {

            this.fetchData();

            let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);

            chart.paddingRight = 20;

            let dummydata = [];
            let visits = 10;
            for (let i = 1; i < 366; i++) {
            visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
            dummydata.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
            }

            chart.data = dummydata;
            console.log(this.series_interactions_daily);

            let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.grid.template.location = 0;

            let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.tooltip.disabled = true;
            valueAxis.renderer.minWidth = 35;

            let series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.dateX = "date";
            series.dataFields.valueY = "value";

            series.tooltipText = "{valueY.value}";
            chart.cursor = new am4charts.XYCursor();

            let scrollbarX = new am4charts.XYChartScrollbar();
            scrollbarX.series.push(series);
            chart.scrollbarX = scrollbarX;

            this.chart = chart;
        },

        beforeDestroy() {
            if (this.chart) {
                this.chart.dispose();
            }
        },
        data() {
            return {
                campaign_id: this.$route.params.campaign_id,
                campaign: [],
                dateranges: [],
                total_interactions: '',
                average_daily_interactions: '',
                series_interactions_daily: [],
            }
        },
        methods: {
            fetchData() {
                this.$http.get('https://dev.local/api/portal/campaign/' + this.campaign_id + '?' + this.axiosParams)
                .then(function(data){
                    return data.json();
                }).then(function(data){
                    this.campaign = data.campaign;
                    this.dateranges = data.dateranges;
                    this.total_interactions = data.totalInteractions;
                    this.average_daily_interactions = data.averagreDailyInteractions;
                    this.series_interactions_daily = data.interactions_per_day.stats.interaction.daily;
                });
            },
            onChange(event) {

                this.$router.push('?range=' + event.target.value);

                this.$http.get('https://connie.laravel/api/portal/campaign/' + this.campaign_id + '?range=' + event.target.value)
                .then(function(data){
                    return data.json();
                }).then(function(data){
                    this.campaign = data.campaign;
                    this.dateranges = data.dateranges;
                    this.total_interactions = data.totalInteractions;
                    this.average_daily_interactions = data.averagreDailyInteractions;
                    this.series_interactions_daily = data.interactions_per_day.stats.interaction.daily;
                });

            }
        },
        created() {

        },
        computed: {
            axiosParams() {
                const params = new URLSearchParams();
                if(this.$route.query.range) params.append('range', this.$route.query.range);
                return params;
            }
        },
        filters: {

        },
        directives: {

        },

    }
</script>

任何帮助表示赞赏。

谢谢， 克...

Answer 1

在fetchData中，返回异步$http调用返回的promise：

fetchData() {
  return this.$http.get(...)
  ...
}

现在您可以在 mounted 中注册该承诺的回调：

mounted() {
  this.fetchData().then(result => {
    ...
  });
}

或者只是等待它async/await：

async mounted() {
  await this.fetchData();
  ...
  // Now everything will be ready
}

正如@tao 在 cmets 中提到的，请注意await 会延迟它之后的任何代码。如果你无论如何都没有其他事情可做，那没问题，但这是要理解的。