javascript - 从 v-bind :style doesn't trigger an update to the view 中调用函数

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);
            }
        },

数组操作似乎有效，但我没有得到任何 View react 。可能是什么问题呢？在 Vue 中有更好的方法吗？我不认为我可以使用计算属性，因为我需要将参数传递给“计算”。

Answer 1

您遇到的问题是 v-for循环 ListView不会按预期运行。 nativescript-vue documentation 中描述了此问题:

<ListView> does not loop through list items as you would expect when using a v-for loop. Instead <ListView> only creates the necessary views to display the currently visible items on the screen, and reuses the views that are already off-screen when scrolled. This concept is called view recycling and is commonly used in mobile apps to improve performance.

This is important because you can't rely on event listeners attached inside the v-template. Instead, you need to use the itemTap event which contains the index of the tapped item and the actual item from the list.

onItemTap(event) {
console.log(event.index)
console.log(event.item)
}