如何在加载图像时将光标更改为进度，并在vuejs中完全加载图像时将其更改为指针？

Question

当卡中的图像尚未加载时，我希望cursor为progress。并在卡内的图像已完全加载时将cursor更改为pointer。我使用样式绑定来实现这一点。:style="{ cursor: imageLoaded[index] ? pointer : progress }"。但是cursor始终是一个pointer。这是我的代码：

<v-row>
   <v-col v-for="(option, index ) in options" :key="index" cols="6">
       <v-lazy :options="{ threshold: 0.5 }" min-height="130">
             <v-hover v-slot:default="{ hover }">
                  <v-card
                      link
                      width="160"
                      id="options_card"
                      :class="[option.selected ? 'elevation-8 primary' : 'elevation-2']"
                      @click="OptionSelected( index, option )"
                      :style="{ cursor: imageLoaded[index] ? pointer : progress }"
                  >
                  <v-list-item>
                      <v-list-item-content>
                          <span id="option_title">{{ option.title }}</span>
                      </v-list-item-content>
                  </v-list-item>

                  <v-img
                      width="100%"
                      height="130"
                      :src="option.thumbnail"
                      id="thumbnail"
                      @load="imageLoaded[index]=true"
                  >
                      <template v-slot:placeholder>
                          <v-sheet color="grey lighten-4" class="px-3 pt-3 pb-6 fill-height">
                              <v-skeleton-loader type="image">
                              </v-skeleton-loader>
                         </v-sheet>
                      </template>
                  </v-img>
              </v-card> 
           </v-hover>
       </v-lazy>
   </v-col>
</v-row>


data () {
   return {
       imageLoaded: []
   }
}

有人能帮上忙吗？谢谢。

Answer 1

我认为它不起作用，因为，数组是反应式的，因为to在开始时没有元素。您必须用false填充imageLoaded数组，然后在加载图像时将所需索引处的项更改为true

就像这样。

data() {
  return {
    imageLoaded: [...options.map(op => false)]
  };
}