laravel - 如何在 vuejs2 中递归调用子项?
问题描述
在我的 laravel/blade 应用程序中,当我需要显示带有 parent_id 的产品评论时,我编写了一个递归调用自身的函数,例如
public function showCommentItem( $commentsList, $parent_id, $product_id, $deeps, $backend_home_url, $images_dir, $current_template )
{
$ret_html= '';
$ret_html.= '<ul class="p-b-30">';
foreach( $commentsList as $nextComment ) { // run list of comments
if ( (int)$nextComment->parent_product_comment_id == (int)$parent_id ) {
$approved_status_html= '';
$ban_user_html= '';
$rating_html= '';
$status_html= '<span class="'.($nextComment->approved_status=='N'?'text-danger':'').'">'.$viewFuncs->getProductCommentApprovedStatusLabel( $nextComment->approved_status ).'</span>';
$current_status_html= '. <span class="_tree_current_status ">Current Status</span> <b>'. $status_html . '</b>. ';
if ( $nextComment->approved_status == "N" or $nextComment->approved_status == "A" ) { // .text-center
...
}
...
$ret_html.= '<li class="'.($nextComment->subitems_count > 0 ? ' isFolder isExpanded ' : '').' p-b-10" >'.
'<small>'./*$nextComment->user_id .' '.$nextComment->user_active_status .' : '.*/$nextComment->username.$ban_user_html.'</small>'./*'<br>' . */
'<small>'.$current_status_html . $approved_status_html .
'<span class="time pull-right">'.$nextComment->created_at.''.$rating_html.'</span>'.'</small>' . '<br>' ;
...
if ( $nextComment->subitems_count > 0 ) {
$deeps++;
$ret_html.= $this->showCommentItem( $commentsList, $nextComment->id, $product_id, $deeps, $backend_home_url, $images_dir, $current_template);
}
$ret_html.= '</li>';
} // if ( $nextComment->parent_product_comment_id == $parent_id ) {
} // recursiveforeach( $commentsList as $nextComment ) { // run list of comments
$ret_html.= '</ul>';
return $ret_html;
whrere $commentsList - 我的评论,$parent_id - 在根调用时为 0,$product_id - 所有评论都通用,我得到了所有功能的所有评论的字符串。
我尝试在 bootstrap-vue 项目中进行类似的操作,例如:
<b-list-group>
// I got root items only with getAdCommentsByParentId method
<b-list-group-item v-for="(nextAdComment) in getAdCommentsByParentId(0)" :key="nextAdComment.id" class="m-1 p-0">
<div class="pre-formatted" v-html="nextAdComment.id+' ( '+nextAdComment.parent_ad_comment_id+') : '+concatStr(nextAdComment.text,50)"></div>
</b-list-group-item>
</b-list-group>
...
methods: {
getAdCommentsByParentId: function (parent_ad_comment_id) {
var retArray= []
if(!this.adComments) return []
this.adComments.map((nextAdComment) => {
if (nextAdComment.parent_ad_comment_id == parent_ad_comment_id) {
retArray[retArray.length]= nextAdComment
}
})
return retArray
},
但是我不知道如何像使用刀片一样进行递归调用?
"bootstrap-vue": "^2.3.0",
"vue": "^2.6.11",
谢谢!
解决方案
推荐阅读
- elasticsearch - 解析 log4net 日志并转发到 Logstash
- command - 同时发送两条命令 telegram-cli
- javascript - 如何在node js中同步读取文本文件并将行组合在一起
- javascript - 在 JavaScript 中递归计算整数数组的总和
- c# - 需要帮助在 C# 中计算 MD5 哈希
- java - java.sql.SQLException:“pos”参数不能 < 1
- wordpress - 通过 Wordpress Rest API 更新帖子时仅出现 403 错误
- html - 行和文本之间的更多空间
- json - 快速解析 JSON 失败
- python - 为什么控制键盘不起作用?左右鼠标