我的 VUE 代码有什么问题没有显示上传结果 [关闭]答案

【问题标题】：What is wrong in my VUE code that doesn't show the upload result [closed]我的 VUE 代码有什么问题没有显示上传结果 [关闭]
【发布时间】：2021-07-28 02:17:09
【问题描述】：

我制作了一个用于上传图片的组件。该组件上传图片但"if"不起作用！问题是什么？上传完成后应该会显示上传结果！该组件完美地上传文件和图像。我应该提到我使用了 VUE/ASP.net 核心的模板。

您可以在以下位置查看代码： https://drive.google.com/file/d/1_9GCtqKltBV4ECbMghAU0jdb45YW1ncv/view?usp=sharing

<template>
    <h1>Uploading an Image!</h1>

    <p>This component demonstrates Uploading Image to server.</p>
    <p v-if="!uploadResult"><em>{{this.uploadResult}}</em></p>

    <div v-if="uploadResult">{{this.uploadResult}} </div>

    <div>
        <form>
            <!--<input type="text" value="" v-model="projectName" placeholder="please enter the project name." />-->
            <input type="file" v-on:change="getFile($event)" />
            <button v-on:click="submitForm($event)">Upload</button>
        </form>

    </div>

</template>

【问题讨论】：

请参阅How to Ask 页面。问题需要独立存在。
你认为我应该说关于我的组件的其他细节吗？如果您有任何意见，请告诉我。
我认为代码至少会有所帮助。
@Saeed Aftabi，下面我的回答能解决您的问题吗？如果是，请将其标记为已接受的答案。如果不。请提供有关该问题的更多信息
谢谢，您的代码对我帮助很大。但是getList后面还有一个3000，那是什么，是干什么的？

标签： javascript vue.js client-side

【解决方案1】：

下面是 CodeSandbox 中的代码： https://codesandbox.io/s/clever-agnesi-w5p9p?file=/src/App.vue

问题是{{ this.uploadResult }}，应该是{{ uploadResult }}。

<p v-if="!uploadResult"><em>{{ uploadResult }}</em></p>
<div v-else>{{ uploadResult }}</div>

我更改了一些代码以在初始状态下设置uploadResult = "" 而不是" "，并在获取之前设置this.uploadResult = "uploading"。

this.uploadResult = "uploading...";

// fetch()xxxxx
const data = { fileName: "Test" };
this.uploadResult = "File " + data.fileName + " successfully uploaded.";
this.getList();

【讨论】：