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来更改{ {1}}数据。结果是，即使重新计算showNav计算的属性，它也不会触发监视程序/方法并更改数据。

Answer 1

仅在使用时评估计算结果。您没有使用计算的allAnswered（），因此输出不会更改。尝试将其放在模板或Mounted（）挂钩中。

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

1 个答案: