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

Posted 2023-02-23

【中文标题】Vue.js 如何从方法更改计算属性？

【英文标题】：Vue.js how to change computed property from a method?

【发布时间】：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 再次为真。或者您的意思是创建一个属性并从不同的地方更新它？

【参考方案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
            )
    

【讨论】：

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

乐于助人！！