代码之家 › 专栏 › 技术社区 › Igor Formiga

我使用一个数组作为参数,并接收一个观察者

system.reactive vuejs2 vue.js javascript

Igor Formiga · 技术社区 · 7 年前

我需要这个数组作为参数,但当我尝试使用它时,我只接收一个观察者。如何使用阵列的信息来代替观察者? 当我控制台。登录从数据库中检索信息的函数,它会按原样显示数据。我不知道还能做什么,我已经尝试过其他方法来解决这个问题,但我没有成功。

           <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>

1 回复 | 直到 7 年前

ittus 7 年前

这是异步代码, 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);
  });