VueJs 和 Laravel 如何将挂载的数据传递给刀片文件？

Question

我需要将 var year_target_progress 获取到我的 html，因为我需要在 style="width: @{{ year_target_progress }}%" 中再次使用它，但它给出了在 axios 调用之前分配的值的结果，我必须用我从 axios 调用中获得的值。 提前谢谢你们。

我的刀片中有这个：

 <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
    @{{ year_target_progress }}%</div>

这在我的 vuejs 中：

import axios from 'axios';
import Vue from 'vue';
import Chart from 'chart.js/auto';

let app = new Vue({
    el: "#app",
    data: {
        delivery: 0,
        max_no: 0,
        max_in_month: 0,

        max_no_order: 0,
        max_in_month_orders: 0,
        year_target_progress: 0,
    },
    mounted: function () {
        this.year_target_progress = 11;
        //prima richiesta per grafico vendite/guadagni
        axios
            .get(`http://127.0.0.1:8000/api/statistics/${user_id}`)
            .then((response) => {
                
                let ordersPerMonth = [];
                let orders = response.data;
                this.max_in_month = 0;
                let today = new Date();
                let current_month = today.getMonth()+1;
                let current_year = today.getFullYear();
                let last_year = current_year - 1;
                let current_month_revenue = 0;
                var current_year_revenue = 0;
                let year_target = 1000;

                for (let i = 1; i <= current_month; i++) {

                    let ordersSum = 0;

                    orders.forEach((element) => {

                        if (i == parseInt(element.created_at.substr(5, 2)) ) { 
                            if( current_year == parseInt(element.created_at.substr(0, 4)) ) {
                                //per il costo di delievery wtf this shit gives me some bug if I comment it
                                element.total_price -= this.delivery;
                                ordersSum += element.total_price;

                                //get current month value 
                                if( i === current_month){
                                    current_month_revenue = ordersSum;
                                }
                            }
                        }

                    });

                    //get highest income in a month
                    if (this.max_in_month < ordersSum) {
                        this.max_in_month = ordersSum
                    }

                    
                    ordersPerMonth.push(ordersSum);
                    
                    //sum current year value
                    if(ordersSum > 0)
                    current_year_revenue += ordersSum;
                }

                this.year_target_progress = Math.floor((100 * current_year_revenue) / year_target);

                //max value on y axis - round up to multiple of 10
                this.max_no = Math.round((this.max_in_month + 10 / 2) / 10) * 10;

            //dati in cards
            document.getElementById('month_record').innerHTML = this.max_in_month;
            document.getElementById('current_month_revenue').innerHTML = current_month_revenue;
            document.getElementById('current_year_revenue').innerHTML = current_year_revenue;
            document.getElementById('year_target').innerHTML = year_target.toLocaleString();

            //get the chart from
            let ctx = document.getElementById('myAreaChart').getContext('2d');
            var myChart = new Chart(ctx, config);

        })
        .catch((er) => {
            alert("Can't load gross revenue chart");
        });

我真的不知道我做错了什么，其他一切正常。

Answer 1

好的，我做到了，使用这种方法。我认为这要容易得多

document.getElementById('year_target_progress').innerHTML = this.year_target_progress;
                document.getElementById('year_target_progress_style').style.width = this.year_target_progress + '%';