如何将 v-if 与 HTTP 请求结合使用 - vue.js

Question

我试图用 v-if 隐藏导航栏中的一个元素。我将获取的布尔值保存在本地存储中。这是我第一次使用 Vue，过去 2 天我一直坚持这个，找不到它不起作用的原因。

<template>
    <router-link v-if="canAccessHistory" to="/activity" class="nav-button" @mouseenter="event => setHover(event, true)" @mouseleave="event => setHover(event, false)">
      <div :class="['nav-button-icon-container', activityActive ? 'nav-button-active' : '']">
        <i :class="['nav-button-icon', 'material-symbols-outlined', activityActive ? 'filled' : '']">history</i>
      </div>
      <p :class="['nav-text', activityActive ? 'text-active' : '']">Logboek</p>
    </router-link>
</template>

<script setup>
canAccessHistory = ref(localStorage.getItem('canAccessHistory'));
</script>

我尝试了所有方法，唯一一次不起作用是当我使用获取的数据时。我确保我的 api 返回一个布尔值。还在我的 js 中检查了它。

Answer 1

您需要

computed

来监听本地存储上所做的更改。有关此内容的更多信息，请参阅此处。

在脚本标签上导入函数。

import { computed } from 'vue';

然后要监听本地存储中的更改，请重构当前变量，如下所示：

const canAccessHistory = computed(() => localStorage.getItem('canAccessHistory') === true);

这将确保 Vue 监视您本地存储值的变化