什么是this.loading = false？

Question

我在用Laravel和Vue。当我在网上搜索时，我看到了下面的代码。

<template>
<div>
<h3 class="text-center">Create Movie</h3>
<div class="row">
<div class="col-md-6">
<form @submit.prevent="createMovie">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="movie.name">
</div>
<div class="form-group">
<label>Director</label>
<input type="text" class="form-control" v-model="movie.director">
</div>
<button type="submit" class="btn btn-primary">Create movie</button>
</form>
</div>
</div>
</div>
</template>

<script>
export default {
    data() {
        return {
            movie: {}
        }
    },
    methods: {
        createMovie() {

            this.axios
                .post('http://localhost:8000/api/movie/create', this.movie)
                .then(response => (
                    this.$router.push({name: 'movie'})
                ))
                .catch(error => console.log(error))
                .finally(() => this.loading = false)
        }
    }
}

我想弄清楚最后一行是什么

.finally(() => this.loading = false)

在做什么。我正在网上搜索，但我找不到它能做什么。另外，我尝试在没有最后一行的情况下运行代码，但是它没有做任何更改。

谁能告诉我这是在做什么，什么时候有用？

Answer 1

如果没有看到相关的Vue模板，我们就无法解释它到底在做什么，但是，我们可以相当确信，loading的值将用于显示/隐藏某种覆盖或活动旋转器。

覆盖/活动旋转器的目的是向用户提供某些事情正在发生的视觉反馈。这在将大量数据加载到页面或执行长时间运行的过程(例如上载大文件)时非常有用。因此，用户不会在第一页加载时看到任何东西，或者单击一个按钮并怀疑它是否有效，而是提供了一些东西来让他们知道正在发生什么事情。

Vue模板中的一个基本示例可以是：

// if the value of loading is true, show this
<div v-if="this.loading">Loading, please wait ...</div>
// otherwise show this
<div v-else>Other content</div>

一旦从axios请求接收到响应，您的示例就是将loading的值设置为false。在提出显示覆盖/活动旋转器的请求之前，您可能希望将loading的值设置为true。

Uncaught (在承诺中) ReferenceError: ture未定义

您有一个错误，应该是true而不是ture。