如果视图 blade laravel 中存在本地存储 javascript，我如何添加调用 vue 组件的条件？

Question

我的看法bladelaravel是这样的：

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

如何在视图上添加条件 blade？

更新

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

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

Answer 1

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

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

只需使用localStorage.setItem()设置一个属性，然后用户localStorage.getItem()获取属性并绑定它。

检查 here fiddle。

您可以简单地在

上使用 v-if 指令

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

显示或隐藏组件。

How can I add condition to call vue component if local storage javascript exist in view blade laravel?