我的VUE代码不显示上传结果是怎么回事

Question

我做了一个上传图片的组件。此组件上传图片但 "if" 不起作用！问题是什么？上传完成后应该会显示上传结果！该组件完美上传文件和图像。我应该提一下，我使用了 VUE/ASP.net core.

的模板

您可以在以下位置查看代码： 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>

Answer 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();

我的VUE代码不显示上传结果是怎么回事

What is wrong in my VUE code that doesn't show the upload result

javascript

client-side

vue.js