vue 一个页面使用两次相同组件, v-on 受影响
在同一个页面中使用了两次同一个组件, 在点击第一个组件后, 第二个组件的 v-on的回调函数受到影响
在第一个测上传明细组件成功后, 第二次点击实物照片 时的回调变成了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>
情况一:
第一次上传采购明细 控制台打印 `function: handleUploadPurchaseDetailSuccess`
第二次上传实物照片 控制台打印 `function: handleUploadPurchaseDetailSuccess`
大家看下什么毛病, 如果还需要哪里的代码提出来, 我贴上
我看你刚才写了情况二的,但我测试时也没有遇到情况二。
我的理解是,应该不会有情况二(即出现调用到第二个函数的情况)
因为你在外层的div中加了
点击事件,并把点击转移到页面中id为file的元素上,当你页面中同时使用两个组件时,就出现了两个相同的id,于是你的选择器永远只能选择到第一个id为file的元素。
问题就出现在这里,处理你想要的视图效果有很多其它方法,不使用你这个函数就不会出现你这种问题了。