цикл v-for показывает только последние загрузки

Question

В нашем приложении пользователи должны иметь возможность загружать копии своих водительских прав в свой профиль.Затем, если им нужно обновить свою лицензию, они загружают еще одну.Однако пользователи должны видеть только свои последние загрузки.

Наш цикл v-for:

<div v-for="(license, index) in licenses.slice(0, 1)" :key="license.id">
       <img :src="license.licenseUrl" class="upload" />
      </div>

Вызов db:

firestore () {
return {
  user: db.collection('users').doc(this.userAuth.id),
  uploads: db.collection('users').doc(this.userAuth.id).collection('uploads'),
  licenses: db.collection('users').doc(this.userAuth.id).collection('licenses')
}
},

И vuex:

db.collection('users').doc(payload.profile).collection('licenses').add({
        licenseUrl: downloadURL,
        uploaded: createdAt
      })

Answer 1

Как упомянул @Stephan Thomas в своем комментарии, я бы подчеркнул, что в этом случае не следует использовать v-for.

V-for отображает ваши представления в цикле, поэтому все элементы вашего licensesпеременная будет предоставлена.Поскольку вы хотите показывать ТОЛЬКО самую последнюю загрузку, я предлагаю вам захватить ее по индексу вручную.

Предполагая, что лицензии имеют значение Array, а требуемый элемент имеет индекс 0, используйте что-то вроде:

<div v-if="licenses.length > 0"> <!-- check if array not empty --> <img :src="licenses[0]" class="upload" /> <!-- get access --> </div>