В приложении laravel -livewire alpine JS нажатие на выбранные подпункты - PullRequest
Новая
       26

В приложении laravel -livewire alpine JS нажатие на выбранные подпункты

0 голосов
/ 07 августа 2020

В приложении laravel 7 / livewire 1.3 / turbolinks: 5.2 / alpine@v2 Я делаю выбор состояния и при выбранном состоянии показываю список связанных регионов. Когда пользователь нажимает на один из регионов, необходимо открыть связанный регион, и я ищу, как его реализовать. В компоненте: 

<?php

namespace App\Http\Livewire;

use App\Hostel;
use App\Region;
use App\State;
use Facade\Ignition\SolutionProviders\IncorrectValetDbCredentialsSolutionProvider;
use Livewire\Component;

class StatesWithRegions extends Component
{
    public function render()
    {
        ...
        return view('livewire.states-with-regions', [
            'hostels_count' => $hostels_count,
            'statesList' => $statesList,
            'regionsListByStateIdArray' => $regionsListByStateIdArray,
        ]);
    } // public function render()


    public function hostelsByRegion($selected_state_code, $selected_regions_slug ) {
        \Log::info( '-1 hostelsByRegion selected_state_code::' . print_r(  $selected_state_code, true  ) );
        \Log::info( '-1 hostelsByRegion $selected_regions_slug::' . print_r(  $selected_regions_slug, true  ) );

        return view('livewire.hostels_by_region', [
//            ...
        ]);
    }
}

В resources / views / livewire / States-with-регионах.blade. php: 

<div class="page_content_container card">
<div class="page_content_header card-title">
    <h4>Available states/regions with hostels</h4>
</div>

<div class="page_content card-body"  x-data="{ selected_state_id: null, selected_state_code: null, regionsByStateId:  <?php print str_replace('"',"'",
    json_encode( $regionsListByStateIdArray) ) ?> } " >


    <hr>
    <hr>
    <select x-model="selected_state_id">
        @foreach($statesList as $nextState)
            <option :value="{{$nextState->id}}" x-text="'{{$nextState->id . '=>' . $nextState->label}}'"></option>
        @endforeach
    </select>
    Stores:

    <template x-for="nextRegionsByState in regionsByStateId[selected_state_id] || []" :key="nextRegionsByState.id">
        <div class="card-body m-0 p-0 ml-3">
            <ul>
        
                <li class="m-0 p-0">
                    <a wire:click="hostelsByRegion( "+selected_state_code+","+ nextRegionsByState.slug + " class="p-1 a_a_link">
                           <div x-html="nextRegionsByState.id + '=>' + nextRegionsByState.text"></div>
                    </a>

                </li>
    
            </ul>
        </div>

    </template>

Для выбора регионов я использую state.id, но для состояния мне нужно использовать state.code В приведенном выше коде я использую selected_state_id для идентификатора выбранного состояния, но мне также нужно

  1. , чтобы заполнить selected_state_code выбранным кодом состояния. Как я могу это сделать?

  2. Мне нужно перейти к списку хостелов, нажав hostelsByRegion (ссылка в приведенном выше коде. Теперь это не работает. В браузере я вижу: https://prnt.sc/tvin91 Похоже, это недопустимый способ. Как я могу это сделать?

  3. Поскольку мне нужно перейти в действие hostelsByRegion, лучше сделать его еще одним компонентом с шаблон или я могу использовать несколько методов с тремплейтом в 1 компоненте StatesWithRegions?

Спасибо!

...