Vue v-后端数据
Vue v-后端数据
提问于 2019-05-21 14:19:47
我有一个应用程序，它使用laravel作为后端/api和vue组件在视图的前端，这是一个不错的组合海事组织。
我现在就是这么做的：
@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长度在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>回答 1
Stack Overflow用户
发布于 2019-05-21 16:57:30
你有几个选择。
更好的解决方案
通过将数据移动到API之后，真正地解耦了组件，并让组件从端点请求它所需要的信息。应用程序/包装器/组件应该负责获取它需要的数据。
不是很好的解决方案
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
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56240344
复制相关文章
相似问题
腾讯云开发者
