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

Question

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

我曾尝试直接更改计算属性中的数据，但此后了解到(通过环顾四周)这是不好的做法。经过一些研究，似乎设置一个观察者在计算属性 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 从返回 false 更改为 true 时，我希望观察者 allAnswered 触发并且触发方法 updateNav 来更改 showNav 数据。结果是，即使 allAnswered 计算属性重新求值，它也不会触发观察者/方法并更改数据。

Answer 1

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