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

Question

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

返回的值

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

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

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

Answer 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
            })
    }
}