Question

我是Vue.js的新手，但我对watch / compute属性迷失了。我已经检查了SO上的其他答案，但似乎没有帮助。

我正在构建一个非常基本的身份验证机制，该机制将一个值存储在localStorage中并检查它是否可以显示组件。

我的v-if块如果表现不正常，它将在重新加载后触发，而不是触发预渲染。我在做什么错了？

<template>
    <div class="container-fluid h-100">
        <div class="wrapper">
            <nav id="navigation" v-if="isAuthenticated">
                <div class="navigation-header">
                    <h3>Some content</h3>
                </div>
            </nav>

            <div id="content">
                <nav class="navbar navbar-expand-lg navbar-light bg-light inset-shadow" v-if="isAuthenticated">
                    <p>some content</p>
                </nav>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        computed: {
            isAuthenticated: function() {
                if (localStorage.getItem('authenticated') === 'true') {
                    return true
                } else {
                    return false
                }
            }
        },
    }
</script>

Answer 1

您可以创建一个方法来检查已验证的用户，然后在created（）或Mounted（）块中运行该方法。或者您可以使用vuex，这是一个更好的选择

计算属性不会触发v-if块

1 个答案: