Как показать элементы в выпадающем списке каскадом в Laravel 5.6?

Question

У меня есть 3 таблицы, т.е. меню, подменю и страницы.

Таблица меню

 Schema::create('menu', function (Blueprint $table) {
        $table->increments('parent_id')->primary();
        $table->string('name');
        $table->timestamps();
    });

Таблица подменю

Schema::create('submenu', function (Blueprint $table) {
        $table->increments('submenu_id')->primary();
        $table->integer('parent_id');
        $table->foreign('parent_id')
            ->references('id')
            ->on('menu')
            ->onDelete('cascade');
        $table->string('title');
        $table->timestamps();
    });

Страница таблицы

 Schema::create('page', function (Blueprint $table) {
        $table->increments('page_id');
        $table->integer('menu_id');
        $table->integer('submenu_id');
        $table->text('description');
        $table->integer('status')->default('1');
        $table->softDeletes();
        $table->timestamps();
    });

addpage.blade.php

 <div class="control-group">
          <label class="control-label">Menu Name</label>
          <div class="controls">
          <?php $menu = DB::table('menu')->where('status',1)->get(); ?>
            <select name="parent_id" id="parent_id">
              <option selected disabled>Select Menu Name</option>
              @foreach($menu as $data)
              <?php if($data->deleted_at==null) { ?>
              <option value="{{ $data->parent_id }}">{{ strtoupper($data->name) }}</option>
              <?php } ?>
             @endforeach
            </select>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">Submenu Title</label>
          <div class="controls">
          <?php //$menu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->get(); ?>
            <select name="submenu_id" id="submenu_id">
              <option selected disabled>Select Submenu Title</option>
             <!-- @foreach($menu as $test)
              <?php// $submenu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->where('parent_id',$test->parent_id)->get(); ?>
              <?php// print_r($submenu);die; ?>
              @endforeach *-->
              <?php $submenu = DB::table('submenu')->where('status',1)->get(); ?>
              @foreach($submenu as $data)
              <?php if($data->deleted_at==null) { ?>
              <option value="{{ $data->submenu_id }}">{{ $data->title }}</option>
              <?php } ?>
             @endforeach
            </select>
          </div>
        </div>

Как каскадное значение в выпадающем списке в laravel 5.6?Когда я добавляю новую страницу, я хочу показать подменю в соответствии с выпадающим меню ... Итак, я хочу найти решение этой проблемы ...

Answer 1

Вот что я придумала.Я немного изменил миграцию:

Schema::create('menus', function (Blueprint $table) {
    $table->increments('id');
    $table->tinyInteger('status')->default(1);
    $table->string('name');
    $table->timestamps();
});

Schema::create('sub_menus', function (Blueprint $table) {
    $table->increments('id');
    $table->tinyInteger('status')->default(1);
    $table->unsignedInteger('menu_id');
    $table->string('title');
    $table->timestamps();

    $table->foreign('menu_id')
        ->references('id')
        ->on('menus')
        ->onDelete('cascade');
});

Schema::create('pages', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('menu_id');
    $table->integer('submenu_id');
    $table->integer('status')->default(1);
    $table->text('description');
    $table->softDeletes();
    $table->timestamps();
});

Затем из контроллера

$menus = Menu::where('status', 1)->orderBy('name')->get()->map(function(Menu $menu) {
    return [
        'name' => $menu->name,
        'value' => $menu->id,
    ];
});

$subMenus = SubMenu::where('status', 1)->orderBy('title')->get()->map(function(SubMenu $subMenu) {
    return [
        'name' => $subMenu->title,
        'value' => $subMenu->id,
        'menu_id' => $subMenu->menu_id,
    ];
})->groupBy('menu_id');

return view('menu.index')
    ->with('menus', $menus)
    ->with('subMenus', $subMenus);

Вы можете видеть, что я сгруппировал подменю, используя поле menu_id, которое будет представлятьиндекс каждой коллекции подменю - таким образом, мы можем легко заменить их в представлении.

Я добавил 2 простых VueJs компонента

Form.vue

<script>
    export default {
        props: {
            inputs: {
                type: Object,
                required: true,
            }
        },
        data() {
            return {
                fields: this.inputs
            }
        },
    }
</script>

DependableMenu.vue

<template>
    <div>
        <slot :options="options"></slot>
    </div>
</template>
<script>
    export default {
        props: {
            parentValue: {
                type: [Number, String],
                default: null,
            },
            records: {
                type: [Object, Array],
                default: () => [],
            }
        },
        data() {
            return {
                options: []
            }
        },
        mounted() {
            this.filterRecords(this.parentValue);
        },
        methods: {
            filterRecords(parent_id) {
                if (!parent_id) {
                    this.options = [];
                }
                this.options = this.records[parent_id] || [];
            }
        },
        watch: {
            parentValue(parent_id) {
                this.filterRecords(parent_id);
            }
        }
    }
</script>

Зарегистрировано их в пределах resources/assets/js/app.js

Vue.component('form-wrapper', require('./components/Form'));
Vue.component('dependable-menu', require('./components/DependableMenu'));

И наконец menu/index.blade.phpпросмотреть с помощью формы

<form-wrapper :inputs="{ menu_id: '', submenu_id: '' }" inline-template>
    <form action="/" method="post">
        {{ csrf_field() }}
        <select name="menu_id" v-model="fields.menu_id">
            <option value="">Select menu</option>
            @foreach($menus as $menu)
            <option value="{{ $menu['value'] }}">{{ $menu['name'] }}</option>
            @endforeach
        </select>
        <dependable-menu :parent-value="fields.menu_id" :records="{{ $subMenus }}">
            <div slot-scope="props">
                <select name="submenu_id">
                    <option value="">Select sub-menu</option>
                    <option v-for="option in props.options" :key="option.value" :value="option.value" v-text="option.name"></option>
                </select>
            </div>
        </dependable-menu>
        <button type="submit">SUBMIT</button>
    </form>
</form-wrapper>

Локально протестировано - все работает, но попробуйте попробовать и посмотрите, как оно работает.

Answer 2

Лучший способ - использовать энергичную загрузку. Создайте связь с обеими моделями и получите значение с помощью этого модельного запроса.

$menus= Menu::with('submenu')->get();

<select name="parent_id" id="parent_id">
 <option selected disabled>Select Menu Name</option>
  @foreach($menu as $key=>$value)
          <option value="{{ $key }}">{{ strtoupper($value) }}</option>

  @foreach($key->submenu as $subkey=>$subValue) { ?>
  <option value="{{ $subkey->parent_id }}">{{ strtoupper($subValue->name) }}</option>
@endforeach   
@endforeach
</select>