Question

我有一个应用程序，该应用程序将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是否大于v-if

中的0

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

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

Answer 1

您有一些选择。

更好的解决方案

通过将数据移到API后面来真正解除组件的耦合，并使组件从端点请求其所需的信息。您的应用程序/包装程序/组件应负责获取所需的数据。

不是很好的解决方案

v-if需要一个Javascript条件，因此您只需让刀片将HTML模板呈现为v-if="true"或v-if="false"，请注意，如果您错误地传递了{{ 1}}而不是"false"，JavaScript会将其解释为false值，逻辑将中断。

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

您也可以将值作为prop传递给组件。 boolean并在<layout-wrapper :shouldDisplay="{{..}}" />上使用它。

v-if

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

1 个答案:

更好的解决方案

不是很好的解决方案