计算属性更改时如何更改数据？

Posted 2023-02-22

【中文标题】计算属性更改时如何更改数据？

【英文标题】：How to alter data when computed property changes?

【发布时间】：2019-06-06 09:35:05

【问题描述】：

在我的 vue.js 模板中，我有一个导航“弹出/模态”组件，在用户单击时会切换。这个导航栏的默认位置是关闭的，但是，当某个计算属性（在这种情况下，一旦回答了一些问题）评估为 true 我希望栏的默认位置是“弹出” 失去模态组件的切换能力。

我曾尝试直接更改计算属性中的数据，但后来了解到（通过查看 SO）这是不好的做法。经过一些研究，似乎设置一个观察者在计算属性allAnswered返回true时调用一个方法是可行的方法，但我根本无法让它工作。

它是一个更大模板的一部分，所以我在下面附上代码的相关部分：

<template>
    <div class="m-btn__nav" @click="showNav = true"><h4>Where to?</h4></div>
    <Navigation v-if="showNav" @close="showNav = false"></Navigation>
</template>
<script>
export default 
    data () 
        return 
            showNav: false
        
    ,
    computed: 
        allAnswered () 
            let q = this.getRoomQuestions(1)
            let a = []
            for (let index = 0; index < q.length; ++index) 
                a.push(q[index].answered)
            
            if (Object.keys(a).every(i => a[i])) 
                return true
             else 
                return false
            
        
    ,
    watch: 
        allAnswered: function (n) 
            this.updateNav()
        
    ,
    methods: 
        updateNav: function () 
          this.showNav = true
        
    

</script>

我希望观察者allAnswered 在计算属性allAnswered 从返回false 更改为true 并触发方法updateNav 以更改showNav 数据时触发。结果是即使allAnswered 计算属性重新计算，它也不会触发观察程序/方法并更改数据。

【问题讨论】：

在数组上使用Object.keys 背后的故事是什么？

a 是一个 json 对象数组

但keys 只是拉取数组的索引。它不适用于单个元素。你可以把那行写成a.every(v => v)

感觉allAnswered可以简化成return this.getRoomQuestions(1).every(q => q.answered)

不清楚allAnswered应该重新评估。它不使用任何反应变量。它只调用一个函数来获取数据。数据的来源是什么？它是反应性的吗？

【参考方案1】：

计算仅在使用时进行评估。 您没有使用计算出的 allAnswered()，因此输出不会改变。 尝试将它放在模板或mounted() 挂钩中。

【讨论】：

那我还能看吗？

是的，您仍然可以观察计算的“值”，但在它被您的组件中某处（除了观察者）引用之前，将其视为 null。