如果视图刀片 laravel 中存在本地存储 javascript，如何添加条件以调用 vue 组件？

Question

我的视图刀片 laravel 是这样的：

<ul class="nav">
    <li>
        ...
    </li>
    // if exist local storage run this component
    <notification-view></notification-view>
</ul>

我想添加条件，如果本地存储存在，它将运行组件vue

我有 main.js，我有代码来检查本地存储是否存在：

if (localStorage.getItem("storedData") !== null) {
   ...
}

如何在视图刀片上添加条件？

更新

我的通知 vie 组件是这样的：

<template>
    <li> 
        ...
    </li>
</template>
<script>
    export default{
        ...
    }
</script>

Answer 1

首先，这个问题与 Laravel 无关。它只是 Vue。

可以绑定本地存储数据查看属性，直接使用v-if指令来决定是否显示组件。

只需使用localStorage.setItem()设置属性，然后使用localStorage.getItem()获取属性并绑定即可。

检查here 是否有小提琴。

您可以简单地在

上使用v-if 指令

<notification-view v-if="someProperty"></notification-view>

显示或隐藏组件。