Vue. js массив сортировки позволяет странице переходить наверх - PullRequest
Новая
       9

Vue. js массив сортировки позволяет странице переходить наверх

0 голосов
/ 04 августа 2020

Я хочу добавить новый элемент в список в vue, это мой код (исправлено, посмотрите редактирование): 

this.stops.push(newStopObject)

Но если я sh остановлю объект, страница переходит к началу страницы. Я хочу, чтобы он оставался на последней позиции. Если я удалю элемент из списка, страница останется на том же месте. Так что это произойдет, только если я что-то добавлю. Отображаемый список является настраиваемым компонентом, например: 

<template v-for="(stop, index) in stops">
    <Stop props...></stop>
    <anotherComponent></anotherComponent>
</template>

Это моя форма Quasar 

 <q-form
              @submit="onAddEntry"
              class="q-gutter-md addEntryForm"
              ref="addEntryForm"
            >
              <q-input
                filled
                v-model="date"
                error-message="Bitte gib ein richtiges Datum an"
                :error="!isDateTimeValid()"
                lazy-rules
                bottom-slots
                style="width:300px"
                class="input-item"
                outlined
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                  >
                    <q-popup-proxy
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="date"
                        today-btn
                        mask="DD.MM.YYYY HH:mm"
                      />
                      <!--  :options="dateOptions" -->
                    </q-popup-proxy>
                  </q-icon>
                </template>

                <template v-slot:append>
                  <q-icon
                    name="access_time"
                    class="cursor-pointer"
                  >
                    <q-popup-proxy
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-time
                        v-model="date"
                        mask="DD.MM.YYYY HH:mm"
                        format24h
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>         
              <div>
                <q-btn
                  round
                  color="primary"
                  icon="add"
                  type="submit"
                >
                  <q-tooltip>
                    Stopp hinzufügen
                  </q-tooltip>
                </q-btn>
              </div>
            </q-form>

Метод onAdddEntry добавляет элемент в список.

Обновление Если узнал, то при склейке нового элемента в массив работает! Но есть и другая причина той же проблемы. После того, как я добавил элемент, я хочу отсортировать его с помощью этого кода здесь: 

this.stops.sort(this.compare)

Метод сравнения здесь: 

compare (a, b) {
  const initDateA = this.getDateFromString(a.InitDate)
  const initDateB = this.getDateFromString(b.InitDate)

  if (initDateA > initDateB) return 1
  if (initDateB > initDateA) return -1

  return 0
}

Здесь он также переходит в начало страницы. Если я уберу сортировку, она будет работать.

Обновление Я выяснил, находится ли новый элемент в последней позиции массива, он не работает, но если он находится в любой другой позиции работает даже при включенной сортировке.

...