带有 laravel 后端数据的 Vue v-if

Posted 2023-02-22

【中文标题】带有 laravel 后端数据的 Vue v-if

【英文标题】：Vue v-if with laravel backend data

【发布时间】：2019-10-07 23:16:02

【问题描述】：

我有一个应用程序，它使用 laravel 作为后端/api 和 vue 组件在前端的视图中，这是一个很好的组合 imo。

这就是我现在所做的：

@if(count($latestPosts) > 0)
    <div class="LAYOUTwrapper_section">
        <layout-title-2 :title="'Últimas publicaciones'"></layout-title-2>
        <post-list-1 :posts=" json_encode( $latestPosts ) " :title="'Últimas publicaciones'"></post-list-1>
    </div>
@endif

现在，当我想检查是否应该渲染一个组件（postsarray 可能为空，然后不渲染 post 组件）时，我使用刀片条件语法，现在这可行，但我正在考虑将此逻辑移动到 vue 组件，保持将刀片语法降至最低，并在前端完全使用 vue 处理。

现在我的问题是如何检查放置在刀片视图文件上的 vue 组件中的 laravel 数组是否为空，而不是在组件内部，基本上我想使用v-if 来检查 $posts ilength 内部是否大于 0 v-if

下面的代码不起作用，但我想要类似的东西。

<div class="LAYOUTwrapper_section" v-if=" json_encode($latestPosts).length > 0 >
    <layout-title-2 :title="'Últimas publicaciones'"></layout-title-2>
    <post-list-1 :posts=" json_encode( $latestPosts ) " :title="'Últimas publicaciones'"></post-list-1>
</div>

【问题讨论】：

【参考方案1】：

你有几个选择。

更好的解决方案

真正解耦您的组件，通过将数据移动到 API 后面并让您的组件从端点请求它需要的信息。你的 App/Wrapper/Component 应该负责获取它需要的数据。

不是很好的解决方案

v-if 需要 javascript 条件，因此您可以让刀片将 html 模板呈现为 v-if="true" 或 v-if="false"，请注意，如果您错误地传递 "false" 而不是 false，Javascript会将其解释为 truthy 值，并且逻辑将中断。

当 vue 接管并渲染组件时，boolean 应该在挂载时启动。

您也可以将值作为道具传递给您的组件。 <layout-wrapper :shouldDisplay=".." /> 并在 v-if 上使用它。

    template: `
    <section/>
        <div class="LAYOUTwrapper_section" v-if="shouldDisplay"></div>
    </section>
    `,
    props: 
        shouldDisplay: Boolean