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

Question

在我的 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 计算属性重新计算，它也不会触发观察程序/方法并更改数据。

Answer 1

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