Nikki
1 year ago

Getting vue to move category depending on category_id

Posted 1 year ago by Nikki

I'm trying to create a page where if a category has a parent category then it will move under the parent category instead of being added at the bottom of the page. I've managed to do it with with laravel, but I'm trying to convert it to a vue page.

I'm not quite sure on how to go about doing it especailly the bit with $category->parentCategory where parentCategory is the relationship function in Category model

Here is my index.blade.php

<tbody>
    @foreach($categories as $category)
        @if($category->category_id)
            <tr>
        @else
            <tr class="parent">
        @endif
                <td>
                    <input name="active" type="checkbox" value="checked" {{ $category->active === 1 ? 'checked' : '' }}>
                    <!-- <input name="active" type="radio" value="checked" {{ $category->active === 1 ? 'checked' : '' }}> -->
                </td>

                <td>
                    {!! Html::linkRoute('category.edit', $category->title, array($category->id)) !!}
                </td>
        
                <td>
                    {!! Html::decode(Html::linkRoute('category.edit', '<i class="fa fa-edit"></i> Edit', array($category->id), array('class' => 'btn btn-primary', 'role' => 'button'))) !!}
                </td>
        
                <td>
                    {{ Form::open(array('method' => 'Delete', 'route' => array('category.destroy', $category->id), 'class' => 'delete-form')) }}
                        <button class="btn btn-danger"><i class="fa fa-pencil"></i> Delete</button>
                    {{ Form::close() }}
                </td>
            </tr>

            <!-- If the menu has children the it gets put under the parent menu -->
            @if (count($category->parentCategory))
                @foreach ($category->parentCategory as $child)
                    @if($child->category_id)
                        <tr class="parent_child">
                    @else
                        <tr>
                    @endif
                            <td>
                                <input name="active" type="checkbox" value="checked" {{ $child->active === 1 ? 'checked' : '' }}>
                            </td>

                            <td>
                                <i class="fa fa-level-up rotate"></i>
                                {!! Html::linkRoute('category.edit', $child->title, array($child->id)) !!}
                            </td>
            
                            <td>
                                {!! Html::decode(Html::linkRoute('category.edit', '<i class="fa fa-edit"></i> Edit', array($child->id), array('class' => 'btn btn-primary', 'role' => 'button'))) !!}
                            </td>
            
                            <td>
                                {!! Form::open(array('method' => 'Delete', 'route' => array('category.destroy', $child->id), 'class' => 'delete-form')) !!}
                                    <button class="btn btn-danger"><i class="fa fa-pencil"></i> Delete</button>
                                {!! Form::close() !!}
                            </td>

                    @if(count($child->parentCategory))
                        @foreach($child->parentCategory as $test)
                            <tr class="children">
                                <td>
                                    <i class="fa fa-level-up rotate"></i>
                                    {!! Html::linkRoute('category.edit', $test->title, array($test->id)) !!}
                                </td>
                        
                                <td>
                                    {!! Html::decode(Html::linkRoute('category.edit', '<i class="fa fa-edit"></i> Edit', array($test->id), array('class' => 'btn btn-primary', 'role' => 'button'))) !!}
                                </td>
                        
                                <td>
                                    {{ Form::open(array('method' => 'Delete', 'route' => array('category.destroy', $test->id), 'class' => 'delete-form')) }}
                                        <button class="btn btn-danger"><i class="fa fa-pencil"></i> Delete</button>
                                    {{ Form::close() }}
                                </td>
                        @endforeach
                    @endif
                @endforeach
            @endif   
        </tr>
    @endforeach
</tbody>

I hope I explained this clearly.

Please sign in or create an account to participate in this conversation.