vue 一个页面使用两次相同组件, v-on 受影响

在同一个页面中使用了两次同一个组件, 在点击第一个组件后, 第二个组件的 v-on的回调函数受到影响

clipboard.png

在第一个测上传明细组件成功后, 第二次点击实物照片 时的回调变成了handleUploadPurchaseDetailSuccess

upload.vue

<template>
  <div>
    <div class="el-upload el-upload--text" @click="handleClickInput">
      <div class="el-upload-dragger">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"><em>点击上传</em>自动解析文件</div>
      </div>
      <input type="file"
             name="file"
             id="file"
             accept="accept"
             class="el-upload__input"
             @change="handleFileChange">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      props: {
          accept: {
              type: String,
        default: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      }
    },
    data () {
      return {
          file: {}
      }
    },
    mounted () {},
    methods: {
      handleClickInput: function () {
        document.getElementById('file').click()
      },
      handleFileChange: function (event) {
        this.file = event.target.files[0]
        this.upload()
        event.target.value = ''
      },
      upload() {
        const self = this
        if (self.file) {
          var formData = new FormData()
          formData.append('file', self.file)
          self.$api.post('/file/upload', formData, function (res) {
              const fileInfo = {
                  fileId: res,
              fileName: self.file.name
            }
            self.$emit('upload-success', fileInfo)
          }, function (e) {

          })
        }
      }
    }
  }
</script>

clipboard.png

情况一:

   第一次上传采购明细 控制台打印 `function: handleUploadPurchaseDetailSuccess`
   第二次上传实物照片 控制台打印 `function: handleUploadPurchaseDetailSuccess`
   


大家看下什么毛病, 如果还需要哪里的代码提出来, 我贴上

回答:

我看你刚才写了情况二的,但我测试时也没有遇到情况二。

我的理解是,应该不会有情况二(即出现调用到第二个函数的情况)

因为你在外层的div中加了

handleClickInput: function () {
        document.getElementById('file').click()
      },
      

点击事件,并把点击转移到页面中id为file的元素上,当你页面中同时使用两个组件时,就出现了两个相同的id,于是你的选择器永远只能选择到第一个id为file的元素。

问题就出现在这里,处理你想要的视图效果有很多其它方法,不使用你这个函数就不会出现你这种问题了。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注