vue.js не обновляется на подключенном () хуке - PullRequest
0 голосов
/ 03 мая 2018

Редактировать: Решено, см. Ответ.

Так что я новичок в vue.js и квазаре, так что это, вероятно, ошибка новичка в отношении ловушек жизненного цикла vue и реактивности vue.

Я хочу изменить размер элемента в зависимости от размера браузера. Высота этого элемента рассчитывается с использованием высоты других элементов. Я использую $ refs, чтобы получить высоту другого элемента, и фиксирую событие onResize (), запускаемое компонентом квазара.

Это событие запускается один раз при загрузке страницы, и все размеры моего элемента равны 0, потому что, я думаю, они еще не отображены в DOM. У меня есть метод для обновления моей вычисленной высоты, который я вызываю, когда захватывается событие «onResize», а также в хуке «mount ()» vue.js.

Моя проблема:

  • первый onResize () вызывает метод, но все элементы имеют высоту 0px.
  • mount () снова вызывает метод, и здесь высота всех элементов вычисляется. Результаты хорошие, но они не отображаются на дисплее, см. Снимок экрана № 1: измените размер событий и размеры, зарегистрированные в консоли, обратите внимание, что размер рассчитывается дважды, один раз для onResize () и один раз для mount (). значение в mount () имеет хорошее значение, но не отображается в DOM.

Screenshot #1 - fullscreen, first loading, size not ok

  • после того, как я изменил размер окна один раз, тогда все в порядке, и у меня больше нет проблем. (скриншоты № 2 (оконный режим) и № 3 (снова полноэкранный режим))

Screenshot #2 - window, size ok Screenshot #3 - fullscreen - size OK

Мой вопрос: почему высота не обновляется в DOM при вызове hook (), даже если он рассчитан правильно? (все в одном файле .vue)

Мой код: Моя проблема с высотой div, который имеет "tableRow" ref

<template>
  <q-page>
    <div class="row" :style="'height: '+pageSize.height*0.95+'px;'">
      <div class="col-6 q-pa-lg">

        <div class="row" ref="actionsRow">
          <div class="col-6 q-mb-sm">
            <q-search hide-underline v-model="filter" />
          </div>
          <div class="col-6">

          </div>
        </div>

        <div class="row" ref="tableHeaderRow">
          <q-table class="col-12" :selection="selectionMode" :selected.sync="selectedRows" :data="templateTableData" :columns="templateColumns"
            row-key="slug" :pagination.sync="pagination" dense hide-bottom>
            <q-tr slot="body" slot-scope="props" :props="props">
            </q-tr>
          </q-table>
        </div>

        <div class="row" ref="tableRow" :style="'height: '+tableHeight+'px;'">
          <q-scroll-area style="height: 100%" class="col-12 q-mt-sm shadow-3">
            <q-table :selection="selectionMode" :selected.sync="selectedRows" :data="templateTableData" :columns="templateColumns" row-key="slug"
              :filter="filter" :pagination.sync="pagination" dense hide-bottom hide-header>
              <q-tr slot="body" slot-scope="props" :props="props" @click.native="onRowClick(props.row)" class="cursor-pointer">
                <q-td auto-width>
                  <q-checkbox color="primary" v-model="props.selected" />
                </q-td>
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  {{ col.value }}
                </q-td>
              </q-tr>
            </q-table>
          </q-scroll-area>
        </div>

      </div>
      <router-view class="col-6 q-pa-lg">
      </router-view>
    </div>
    <q-window-resize-observable @resize="onResize" />
  </q-page>
</template>

Сценарий:

var data = []
for (var i = 1; i <= 100; i++) {
  data.push({
    id: i,
    name: 'Template ' + i,
    slug: 'template' + i,
    active: true
  })
}

import { mapActions, mapGetters } from 'vuex'

export default {
  data: () => ({
    pageSize: {
      height: 0,
      width: 0
    },
    tableHeight: 0,
    templateColumns: [
      {
        name: 'templateName',
        required: true,
        label: 'Name',
        align: 'left',
        field: 'name',
        sortable: true
      },
      {
        name: 'templateSlug',
        label: 'Slug',
        align: 'left',
        field: 'slug',
        sortable: true
      },
      {
        name: 'templateActive',
        label: 'Active',
        align: 'left',
        field: 'active',
        sortable: true,
        sort: (a, b) => {
          if ((a && b) || (!a && !b)) {
            return 0
          } else if (a) {
            return 1
          } else {
            return -1
          }
        }
      }
    ],
    selectionMode: 'multiple',
    selectedRows: [],
    pagination: {
      sortBy: null, // String, column "name" property value
      descending: false,
      page: 1,
      rowsPerPage: 0 // current rows per page being displayed
    },
    templateTableData: data,
    filter: ''
  }),
  computed: {
    ...mapGetters('appUtils', [
      'getPageTitle',
      'allConst'
    ])
  },
  methods: {
    ...mapActions('appUtils', [
      'setPageTitle',
      'deletePageTitle'
    ]),
    onResize (size) {
      this.pageSize.height = size.height - this.getPageTitle.height
      this.resizeTable()
      console.log('ON RESIZE EVENT:')
      console.log('tableHeaderRow:'+
          this.$refs.tableHeaderRow.clientHeight)
      console.log('actionsRow:' + this.$refs.actionsRow.clientHeight)
      console.log('table:' + this.tableHeight)
    },
    onRowClick (row) {
      this.$router.push('/templates/' + row.slug)
    },
    resizeTable () {
      this.tableHeight = this.pageSize.height - this.$refs.actionsRow.clientHeight -
          this.$refs.tableHeaderRow.clientHeight - this.getPageTitle.height -
          this.allConst.templatePageHeaderMargins
    }
  },
  mounted () {
    console.log('MOUNT TEMPLATES')
    this.setPageTitle({ text: 'Manage templates', height: this.allConst.titleHeight })
    this.resizeTable()
    console.log('tableHeaderRow:' + this.$refs.tableHeaderRow.clientHeight)
    console.log('actionsRow:' + this.$refs.actionsRow.clientHeight)
    console.log('table:' + this.tableHeight)
  },
  destroyed () {
    console.log('DESTROY TEMPLATES')
    this.deletePageTitle()
  }
}

1 Ответ

0 голосов
/ 03 мая 2018

Боже мой, я идиот. Еще одна моя переменная (titleSize) была 0, как и другие размеры, во время первого события onResize(), и я не учел это, чтобы исправить ее во время mounted() Hook.

...