Question

因此，我正在Vue.js和Laravel中构建一个应用程序。我目前已经完成了“票证”功能，该功能要求按截止日期对公司的每个“待办事项”进行排序。它可以完美地组织起来，直到代码中的某个点为止。

这是我的服务（fleshdesk.js）

class Freshdesk {

    getIssues() {
        return this.api()
    }

    async api() {

        const response = await axios.request({
            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/tickets?order_by=due_by`,
            method: 'get',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic [KEY]',
            }
        });

        return response.data;
    }
}

这是我的Vue文件（在某些时候，我的数据会在这里重新组织）。这是我在请求中请求数据的地方，因此我可以获取某个ID并在另一个表中查找它。

data() {
    return {
        issues: [],
    };
},

mounted() {
    Freshdesk.getIssues()
        .then(response => {

            console.log(response);

            for (var i = 0; i < response.length; i++) {

                const issueData = {
                    subject: '',
                    email: '',
                    name: '',
                    company: '',
                    due: '',
                };

                issueData.subject = response[i]['subject'];

                var dueDate = new Date(response[i]['due_by']);
                const months = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

                let formatted_date = dueDate.getDate() + " " + months[dueDate.getMonth()];
                issueData.due = formatted_date;

                // THIS IS WHERE MY LIST GETS MESSED UP

                axios.request({
                    baseURL: `https://glue-customer-support.freshdesk.com/api/v2/contacts/` + response[i]['requester_id'],
                    method: 'get',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic [KEY]',
                    },
                }).then(contactRes => {

                    issueData.name = contactRes['data']['name'];
                    issueData.email = contactRes['data']['email'];
                    this.issues.push(issueData);

                    if (contactRes['data']['company_id'] == !null) {

                        axios.request({
                            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/companies/` + contactRes['data']['company_id'],
                            method: 'get',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Basic [KEY]',
                            },
                        }).then(companyRes => {
                            issueData.company = companyRes['data']['name'];

                            this.issues.push(issueData);
                            console.log(issueData);

                        });
                    } else {
                        issueData.company = "";
                        this.issues.push(issueData);
                        console.log(issueData);
                    }
                });
            }
        })
        .catch(error => {
            console.log('There was an error:', error.response);
        });
},

它最终也显示在我的Vue文件中：

<template>
  <tile :position="position">
    <div class="grid gap-padding h-full markup">
      <ul class="align-self-center">
        <h1>Freshdesk</h1>

        <li v-for="issue in issues">
          <div class="my-2">
            <p>{{issue['subject']}}</p>
            <p>{{issue['name']}}</p>
            <p>{{issue['email']}}</p>
            <p v-if="issue['company']!== ''">{{issue['company']}}</p>
            <p>{{issue['due']}}</p>
          </div>
        </li>
      </ul>
    </div>
  </tile>
</template>

因此您可以看到我的数据在视图模板中呈现。问题在于，每次刷新页面时，数据的组织方式都不同。（例如16 16 16 16 14 14 15 16）或相反。我希望它首先显示最接近到期日的数据。我没看到什么？关于我的axios格式有些混乱吗？

每次刷新后，我的数据都会随机返回，我不知道为什么

0 个答案: