如果查看刀片laravel中存在本地存储javascript，如何添加条件来调用vue组件？

Question

我的视图刀片如下：

<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) {
   ...
}

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

更新

我的通知是这样的组件：

<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>

显示或隐藏组件。