vuetify: не удается выбрать первый элемент списка после удаления фильтра.

Question

У меня есть список марок с vuetify, как показано ниже.

    <v-list dense>
      <v-list-item-group mandatory color="blue" v-model="selectedIndex">
        <v-list-item
          v-for="item in items"
          :key="item.id"
          @click="listClick"
        >
          <v-list-item-content>
            <v-list-item-title v-text="item.description"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

Я делаю часы на items, который является опорой для данных в списке

  watch: {
    items(newItems) {
      this.selectFirstItem(newItems);
    },
  },

В метод selectFirstItem, я пытаюсь выбрать первый элемент, устанавливая данные selectedIndex в 0, которые привязываются к v-модели v-list-item-group, как это <v-list-item-group v-model="selectedIndex">

    selectFirstItem(items) {
      .
      .
      .
      this.selectedIndex = 0;
      .
      .
      .
    },

для фильтра элементов, я Делая это с computed, как показано ниже, getTrmLevel1 является получателем vuex.

    items() {
      if (this.layerIndex === -999) {
        return this.getTrmLevel1;
      }
      return this.getTrmLevel1.filter((item) => item.layer === this.layerIndex);
    },

Работает, когда данные изменяются с all to filtered (т.е. добавляет фильтр), но не работает при изменении с filtered to all (т.е. очистить фильтр), он продолжает выделять элемент, который я выбрал, перед тем как удалить фильтр вместо первого.

Я новичок в vue, поэтому я не уверен, что делаю правильная вещь для выбора первого элемента, любые указатели приветствуются.

Последние результаты

После долгого просмотра с помощью плагина Vue я выясняю, что вызвало такое поведение .

1) Когда показывать все данные

**Index \ Item**
0 \ a-1
1 \ a-2
2 \ b-1
3 \ b-2
4 \ c-1

2) Когда показывать элемент содержит только b, это работает, потому что индекс не может не может использоваться повторно, так как максимальный индекс равен 1, поэтому, например, b-1 потребуется изменить индекс, так как исходный индекс 2 больше 1 и недействителен

**Index \ Item**
0 \ b-1
1 \ b-2

3) Когда снова показываются все элементы, он Это еще одна история, поскольку индекс можно использовать повторно, поэтому b-1 и b-2 сохраняют свой индекс (0 и 1), поэтому проблема в том, что индекс 0 на самом деле не первый элемент, но не Vue / Vueify не ответил на this.selectedIndex = 0;

**Index \ Item**
2 \ a-1
3 \ a-2
0 \ b-1
1 \ b-2
4 \ c-1

Итак, мой последний вопрос: как Find out index of first item? или Are there other valid method to select the first item?

Обходной путь

Хотя я не проверен, я нахожу Обходной путь для этой проблемы, центр этого повторного использования составляет около :key, так как я делаю :key="item.id", он будет повторно использоваться на основе моего ключа элемента

        <v-list-item
          v-for="item in items"
          :key="item.id"
          @click="listClick"
        >

, поэтому я сейчас работаю над этой проблемой привязка v-for l oop index, как этот :key="index", таким образом vue повторно использовать базу элементов списка на позиции в списке, хотя это может привести к большему обновлению, но я могу сохранить selectedIndex = 0 для моего первого Item

        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          @click="listClick"
        >

Любая рекомендация все еще приветствуется