Question

我需要将此数组作为参数，但当我尝试使用它时，我只接收一个观察者。如何使用数组的信息而不是观察者？当我在从数据库中检索信息的函数中的console.log时，它会显示应该的数据。我不知道还能做什么，我已经尝试过其他方法来解决这个问题，但我还没有成功。

           <script>
            import { ClientTable } from 'vue-tables-2';
            import Vue from 'vue';
            import Multiselect from 'vue-multiselect';
            import options from './../../../commons/helpers/grid.config';
            import edit from './edit';

            Vue.use(ClientTable, options, false, 'bootstrap4', 'default');
            Vue.component('multiselect', Multiselect);

            export default {
              name: 'Reporting',
              removable: false,
              components: {
                edit,
              },
              showLoading: true,
              data() {
                return {
                  selected: null,
                  columns: ['period', 'costCenter', 'hours', 'actions'],
                  reportingsList: [],
                  periods: [],
                  totalHours: 0,
                  options: {
                    sortable: [],
                    columnsClasses: {
                      actions: 'action-column text-center',
                      period: 'period-column',
                      costCenter: 'costCenter-Column',
                      hours: 'hours-column',
                    },
                  },
                };
              },
              mounted() {
                this.getAll();
              },
              methods: {
                getTotalHours(reportings) {
                  let result = 0;
                  for (let i = 0, length = reportings.length; i < length; i += 1) {
                    result += reportings[i].hours;
                  }
                  console.log(result); //eslint-disable-line
                  console.log(this.reportingsList); //eslint-disable-line
                  this.totalHours = result;
                },
                getAll() {
                  const url = 'reportings/getAll';

                  this.$http().get(url).then((response) => {
                    this.reportingsList = response.data;
                    console.log(this.reportingsList.length);//eslint-disable-line
                  });
                  this.getTotalHours(this.reportingsList);
                }
            </script>

Answer 1

这是异步代码，this.getTotalHours将在this.$http.get完成之前执行。

您需要链接.then

 this.$http().get(url).then((response) => {
    this.reportingsList = response.data;
    console.log(this.reportingsList.length);//eslint-disable-line
    return response.data
  }).then(() => {
    this.getTotalHours(this.reportingsList);
  });

我使用数组作为参数，我收到一个观察者

1 个答案: