Vuetify, v-for флажок с полем поиска.Странное поведение на флажке

Question

Я составляю список людей для выбора с помощью панели поиска, чтобы найти имя человека.Я использую компьютер и фильтр для поиска в списке.Но в моем контрольном списке есть странное поведение.Я не знаю, что случилось.Пожалуйста, проверьте ссылку codepen выше.Попробуйте выполнить поиск и удалите поиск.

https://codepen.io/rahmatfajar15/pen/OqPqRy?editors=1010

шаблон:

<code><v-layout column fill-height>
  <v-flex> 
    <v-text-field
      v-model="pattern"
      box
      hide-details
      label="Cari Peserta..."
      prepend-inner-icon="search"
      clear-icon="close"
      clearable
    />
    </v-flex>

    <v-layout column>
      <div
        v-for="item in filteredPeserta"
      >
        <v-layout row class="text-xs-left">
          <div class="xs2 justify-center align-center">
            <v-checkbox
              height="16"
              v-model="tempPeserta"
              :value="item.id"
            />
          </div>
          <v-layout xs10 column justify-center>
            <pre class="body-2">{{ item.name }}

скрипт:

new Vue({
  el: '#app',
  data: () => ({
    pattern: '',
    tempPeserta: [],
    listPeserta: [
      {
        id: '1',
        name: 'Agung'
      },
      {
        id: '2',
        name: 'Bucin'
      },
      {
        id: '3',
        name: 'Chandra'
      },
      {
        id: '4',
        name: 'Dedek'
      },
      {
        id: '5',
        name: 'Enok'
      },
      {
        id: '6',
        name: 'Fajar'
      },
      {
        id: '7',
        name: 'Galih'
      },
      {
        id: '8',
        name: 'Hayo'
      },
      {
        id: '9',
        name: 'Ilsa'
      },
    ]
  }),
  computed: {
    filteredPeserta () {
      return this.listPeserta.filter(item => {
        return item.name.toLowerCase().indexOf(this.pattern.toLowerCase()) > -1
      })
    }

  }
})

Answer 1

Вам необходимо добавить key при использовании v-for, потому что Vue будет повторно использовать компонент списка ( document )

   <div
           v-for="item in filteredPeserta"
           :key="item.id"
           >
      ....
   </div>