Vue.js图片加载状态切换光标异常求助：进度/指针光标不生效

咱们一步步拆解你遇到的问题，逐个解决：

1. CSS关键字未加引号，导致样式判断失效 #

你样式绑定里的pointer和progress是CSS内置的关键字，必须以字符串形式传入，但你现在直接写了变量名，Vue会尝试在实例中查找这两个变量，找不到就会返回undefined，导致整个cursor样式不生效。而<v-card>的link属性会默认给卡片加上cursor: pointer的样式，所以你看到光标一直是pointer。

修正这个部分：

:style="{ cursor: imageLoaded[index] ? 'pointer' : 'progress' }"

2. imageLoaded数组未初始化，初始状态异常 #

你初始化imageLoaded为空数组，循环渲染options时，imageLoaded[index]的初始值是undefined，虽然逻辑上undefined会被当作false，但为了避免潜在的逻辑错误，最好在组件初始化时就把imageLoaded设置为和options长度一致的数组，每个元素默认false。

在created钩子中添加初始化代码：

created() {
  this.imageLoaded = this.options.map(() => false);
}

3. 可选：处理v-card的link属性优先级问题 #

如果修正前两点后还是有问题，大概率是v-card的link属性自带的cursor: pointer样式优先级比你绑定的内联样式高。你可以二选一：

• 去掉v-card的link属性（你已经通过@click添加了点击事件，link主要是提供默认链接视觉效果，若不需要可直接移除）
• 给绑定的cursor样式加上!important强制覆盖：

  :style="{ cursor: imageLoaded[index] ? 'pointer' : 'progress !important' }"
  

修正后的完整代码片段 #

<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 
          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: []
  }
},
created() {
  this.imageLoaded = this.options.map(() => false);
}

这样就能实现你想要的效果：图片加载完成前光标显示为progress，加载完成后切换为pointer了。

内容的提问来源于stack exchange，提问作者Boidurja Talukdar