Vue.js 如何从方法更改计算属性？答案

【问题标题】：Vue.js how to change computed property from a method?Vue.js 如何从方法更改计算属性？
【发布时间】：2021-03-13 00:48:30
【问题描述】：

例如，我有一个具有:disabled="isDisabled" 属性的按钮其中isDisabled 是一个返回布尔值的计算属性。此外，在代码中，我有一个方法，我想从中更改计算的属性值。例如，在进行某些操作（例如向服务器发送请求）的情况下，我想让按钮处于非活动状态。但是我想让计算属性完成它们的工作，以防在其权限范围内应用任何操作。所以我想明确地重新定义计算属性返回的值。

<button
  type="submit"
  class="btn btn-primary"
  :disabled="isDisabled"
   @click.prevent="submitted"
>

computed: {
     isDisabled: function() {
     //... some code
     return true
     }
}

解决这个问题的正确方法是什么？谢谢。

【问题讨论】：

两者都不是。考虑添加一个附加状态，当您的 http 请求正在进行时标记并在完成后重置，与您的 isDisabled 标志一起使用。如果有两个不同的条件...创建两个不同的属性。
@DavidL 谢谢你的回答。是的，在我看来这是有道理的。你的意思是我需要使用像这样的附加标志：disabled="isDisabled && isLoading"？因此，如果我的 isDisabled 在所有字段验证都通过并且 isLoading 为真时为假，那么如何击败这些值以使 : disabled 再次为真。或者您的意思是创建一个属性并从不同的地方更新它？

标签： vue.js methods computed-properties

【解决方案1】：

正如我在评论中提到的，您通常希望计算属性只处理一项工作。如果您添加一个专门处理您正在进行的 http 请求的数据属性并同时使用两者，您就可以对禁用状态进行细粒度控制。

<button
  type="submit"
  class="btn btn-primary"
  :disabled="isDisabled || isLoading"
   @click.prevent="submitted"

data: function () {
    return {
        isLoading: false
    }
},
computed: {
     isDisabled: function() {
     //... some code
     return true
     }
},
methods: {
    makeHttpCall: function () {
        this.isLoading = true

        axios
            .get('url')
            .finally(function () {
                this.isLoading = false
            })
    }
}

【讨论】：

非常感谢大卫。是的，这是我问题的确切解决方案。
乐于助人！！