Javascript vue.js-v-on:更改未被侦听

我正在使用Vue.js版本2.5.17，最近v-on:change已经不起作用了

用户单击“选择文件”按钮，并在此更改上捕获图像名称。在此之后，它将触发屏幕上显示的一个或多个文件，然后保存到firebase

相反，我现在得到一个错误：

job.vue?d03e:825 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at eval (job.vue?d03e:825)
    at new Promise (<anonymous>)
    at new F (_export.js?90cd:36)
    at VueComponent.uploadFile (job.vue?d03e:823)
    at VueComponent.uploadProofOfWork (job.vue?d03e:787)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-45a8035d","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/job.vue (0.491509201fd57af656ef.hot-update.js:7), <anonymous>:1096:55)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLAnchorElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

JS

---

堆栈跟踪显示错误发生在

uploadFile

中，由

uploadproofwork

调用。错误是

无法读取未定义的属性“name”

。

uploadFile

中对

.name

的唯一引用是

file.name

，其中

file

是一个函数参数。如果查看

uploadproofwork

，则没有传递到

uploadFile

的参数：

this.uploadFile().then(imageUrl => /* ... */)

---

它看起来不像您的代码定义了

文件

路径中的任何地方。我在

fileupload

中看到了

file

，但这些文件似乎是打算在

uploadImages

中上载的（而不是

uploadproofwork

）。也许您的代码缺少“工作证明”的单独文件输入。

我不知道如何使用vue.js 3.0.1，因为最新版本是2.5.17。。。你能在这里复制整个stacktrace吗（例如，在哪一行抛出错误）？@MátéWiszt，我已经根据你的请求更新了帖子。我也明白你的意思。我以为

$vue--version

命令给出了最新版本，但它给出了vuex版本。我检查了package.json，发现vue版本实际上是

“vue”：“^2.5.17”

。该错误与@change event无关，请提供作业的内容。vue@boussadjrabrahim，job.vue的模板和js就是上面粘贴的。但是您只粘贴方法，您的意思是：`this.uploadFile（file）。然后（imageUrl=>{`因为这不起作用。我认为问题比我们想象的要简单得多：在UploadProof工作中，您调用uploadFile，但没有任何参数，尽管您使用两个参数定义了它：file和jobId

uploadProofOfWork() {
        this.uploadFile().then(imageUrl => {
            this.data.image = imageUrl;
            db
                .collection("jobs")
                .where("taskId", "==", this.taskId)
                .add(this.data)
                .then(function(docRef) {
                    this.self.clearForm();
                    this.self.loadingText = this.$t(
                        "App.job.uploadedPhotoSuccessfully"
                    ) /* Post was created successfully. */ ;
                })
                .catch(function(error) {
                    console.error("Error adding document: ", error);
                });
        });
    },
    async uploadImages() {
        const self = this;
        const results = this.images.map(async({ file }) => {
        const imageUrl = await this.uploadFile(file, self.job.taskId);
        return { name: file.name, url: imageUrl };

        });
        Promise.all(results).then(async imageUrls => {
            if (!Reflect.has(this.job, "images")) this.job.images = [];
            const images = [...this.job.images, ...imageUrls];
            const result = await db
                .collection("jobs")
                .doc(this.job.taskId)
                .set({ images }, { merge: true })
                .then(docRef => {
                    console.log("updated!", docRef);
                });
        });
    },
    uploadFile(file, jobId) {
        return new Promise((resolve, reject) => {
            const self = this;
            const storageRef = firebaseStorage
                .ref()
                .child("jobs/" + jobId + "/" + file.name + "-" + uuid.v1());
            let uploadTask = storageRef.put(file);
            uploadTask.on(
                "state_changed",
                function(snapshot) {
                    const progress =
                        snapshot.bytesTransferred / snapshot.totalBytes * 100;
                    self.loadingText =
                        this.$t('App.job.uploadedPhotoProgress') /* Upload is */ +
                        progress +
                        this.$t(
                            'App.job.uploadedPhotoProgress2'
                        );
                    /* % done. Processing post. */
                    this.upload.progress = (uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes) * 100;
                    console.log(this.upload.progress);
                },
                function(error) {
                    reject(error);
                },
                async function() {
                    const downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();
                    resolve(downloadUrl);
                }
            );
        });
    },
    async fileUploaded(e) {
        const images = await Promise.all(
            Array.from(e.target.files).map(file => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = e => {
                        resolve({ src: e.target.result, file, progress: null });
                    };
                    if (e.target.file) {
                        reader.readAsDataURL(e.target.this.file[0]);
                    }
                });
            })
        );
        this.images = images;
        console.log(this.images);
    },

this.uploadFile().then(imageUrl => /* ... */)