0

在我的 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= '.&nbsp;<span class="_tree_current_status ">Current Status</span>&nbsp;<b>'. $status_html . '</b>.&nbsp;';
            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",

谢谢！

4

1 回答 1

0

我找到了文章

在 Vue.js 中创建递归树组件

来自 https://alligator.io/vuejs/recursive-components/ 正是我需要的！

于 2020-07-10T06:54:52.890 回答