Вызов функции из v-bind: стиль не вызывает обновления представления

Question

У меня есть список изображений (например, галерея).Длинное нажатие (я использую Nativescript-vue) на изображении изменит стиль изображения и сделает его «выбранным».Это изображение:

<ListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
      <v-template>
        <ImageComponent
          v-bind:style="{backgroundColor:isSelected(image.identifier) ? 'cyan' : 'white'}"
          :onLongPress="()=>{onLongPress(image.identifier)}"
          :onShortPress="()=>{onShortPress(image.identifier)}"
          :image="image"
        ></ImageComponent>
      </v-template>
    </ListView>

Как видите, я вызываю какой-то метод isSelected, чтобы проверить, выбрано ли изображение или нет.Метод находится в mixin:

isSelected(identifier){            
            const isSelected = this.selectedImages.includes(identifier);
            return isSelected
        }

Это метод onLongPress, который переключает состояние выбора изображения:

onLongPress(identifier) {
            if(this.selectedImages.includes(identifier)){
                const index = this.selectedImages.indexOf(identifier);
                this.$delete(this.selectedImages,index);
            }else{
                const index = this.selectedImages.length;
                this.$set(this.selectedImages,index,identifier);
            }
        },

Кажется, что манипулирование массивом работает, но я не получаюлюбой вид реактивности.В чем может быть проблема?Есть ли лучший подход для этого в Vue?Я не думаю, что могу использовать вычисляемое свойство, поскольку мне нужно передать аргумент в «вычисление».

Answer 1

Проблема в том, что цикл v-for на ListView не будет работать должным образом. Эта проблема описана в документации nativescript-vue :

<ListView> не перебирает элементы списка, как вы ожидаете при использовании цикла v-for. Вместо этого <ListView> создает только необходимые виды для отображения на экране видимых в данный момент элементов и повторно использует виды, которые уже находятся вне экрана при прокрутке. Эта концепция называется повторным использованием представления и обычно используется в мобильных приложениях для повышения производительности.

Это важно, потому что вы не можете полагаться на прослушиватели событий, подключенные внутри v-template. Вместо этого вам нужно использовать событие itemTap, которое содержит индекс выбранного элемента и фактический элемент из списка.

onItemTap (событие) {
console.log (event.index)
console.log (event.item)
} * * Тысяча двадцать-один