vue2弹窗打开没有加载状态?

Question

<template>
  <div id="app">
    <el-dialog :visible.sync="isVisible">
      <template slot="title">
        <div>
          <span>图片查看</span>
        </div>
      </template>
      <div v-loading="imgLoading">
        <img
          :src="currentImage"
          v-show="imgDataArr.length > 0 && !imgLoading"
          @load="imageLoaded"
          @error="imageLoadedFailed"
          alt=""
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return  {
      isVisible: this.fileImageData.show,
      currentIndex: '',
      imgDataArr: [],
      currentImage: '',
      imgLoading: true
    }
  },
  props: {
    fileImageData: Object
  },
  watch:{
    currentIndex: {
      hanler(newV){
        if(this.imgDataArr.length > 0) {
          const formData = new FormData()
          formData.append('file', this.imgDataArr[newV].attId)
          const res = downloadFileImage(formData)
          res.then(blob => {
            if(blob instanceof Blob) {
              const url = window.URL.createObjectURL(blob)
              this.currentImage = url
            }
          })
        }
      }
    }
  },
  mounted() {
    this.getImage()
  },
  methods: {
    getImage() {
      const arr = []
      this.fileImageData.imageData.map(item => {
        arr.push({attId:item.attId})
      })
      this.imgDataArr = arr
      this.currentIndex = 0
    },
    imageLoaded() {
      this.imgLoading = false
    },
    imageLoadedFailed() {
      this.imgLoading = false
    }
  }
}
</script>

这是子组件，上面这样写，弹窗打开的时候没有加载状态，是什么原因

Answer 1

<template>
  <!-- ... -->
  <div v-loading="imgLoading">
    <img
      :src="currentImage"
      v-if="currentImage" <!-- 用 v-if 替换 v-show ->
      @load="imageLoaded"
      @error="imageLoadedFailed"
      alt=""
    >
  </div>
  <!-- ... -->
</template>
<script>
export default {
  // ...
  watch:{
    // 修改 typo
    currentIndex: {
      handler(newV, oldV) {
        if(newV !== oldV) {
          this.imgLoading = true; 
          // ... your code to load the image
        }
      },
      immediate: true // watcher绑定后立马触发
    }
  },
  methods: {
    // ...
    getImage() {
      // ... your code
      this.imgLoading = true; 
    },
    imageLoaded() {
      this.imgLoading = false;
    },
    imageLoadedFailed() {
      this.imgLoading = false;
      // 错误处理
    }
  }
}
</script>