Q&A
タイトルは「Livewire」になっていますが質問本文1行目では「Laravelのlivewire」になっています。タイトルの「Livewire」と本文の「Laravelのlivewire」は違う意味を表していますか？大文字と小文字の違いは何ですか？
前提
Laravelのlivewireを使って入力画面を作ろうとしていますが、
フォーム部品に入力しようとすると何故かフォーカスが外れてしまいます。
対応方法をご教示いただきたいです。
create.blade.php
php
1<x-app-layout> 2 <x-slot name="header"> 3 <header class="text-gray-600 body-font"> 4 <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"> 5 <a href="{{ route('diagnoses.show', ['diagnosis' => $diagnosis]) }}" class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"> 6 <span class="ml-3 text-xl">{{ $diagnosis->title }}</span> 7 </a> 8 <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"> 9 <a href="{{ route('diagnoses.question_templates.create', ['diagnosis' => $diagnosis]) }}" class="mr-5 hover:text-gray-900">設問</a> 10 <a class="mr-5 hover:text-gray-900">付加情報</a> 11 <a class="mr-5 hover:text-gray-900">結果</a> 12 </nav> 13 <button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"> 14 プレビュー 15 <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24"> 16 <path d="M5 12h14M12 5l7 7-7 7"></path> 17 </svg> 18 </button> 19 </div> 20 </header> 21 </x-slot> 22 23 <div class="py-12"> 24 <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> 25 <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-2"> 26 @livewire('question-templates', [ 27 'question_templates' => collect($diagnosis->question_templates->toArray()), 28 'axises' => $diagnosis->axises, 29 'diagnosis' => $diagnosis, 30 ], key($diagnosis->id)) 31 </div> 32 </div> 33 </div> 34</x-app-layout> 35
QuestionTemplates.php
php
1<?php 2 3namespace App\Http\Livewire; 4 5use Livewire\Component; 6use App\Models\QuestionTemplate; 7use App\Models\Diagnosis; 8use App\Models\Choice; 9use Illuminate\Support\Collection; 10 11class QuestionTemplates extends Component 12{ 13 protected $rules = [ 14 'question_templates.*.content' => 'required|string|min:5|max:50', 15 'question_templates.*.axis_id' => 'required|integer', 16 'question_templates.*.choices.*.content' => 'required|string|min:2|max:12', 17 ]; 18 19 public Diagnosis $diagnosis; 20 public Collection $question_templates; 21 public Collection $axises; 22 23 public function push_question_template() 24 { 25 $question_templates = $this->question_templates; 26 $questionTemplate = new QuestionTemplate(); 27 $questionTemplate->choices = collect()->push(new Choice())->push(new Choice()); 28 $this->question_templates = collect($question_templates)->push($questionTemplate); 29 $this->resetValidation(); 30 } 31 32 public function pop_question_template() 33 { 34 $question_template = $this->question_templates->pop(); 35 if(@$question_template['id']) { 36 $question_template_object = QuestionTemplate::where('id', $question_template['id'])->first(); 37 foreach($question_template_object->choices as $choice) 38 { 39 $choice->delete(); 40 } 41 $question_template_object->delete(); 42 } 43 } 44 45 // render描画前に実行( constructorのように) 46 public function mount() 47 { 48 } 49 50 public function updated($property) 51 { 52 $this->validate(); 53 } 54 55 public function save() 56 { 57 $this->validate(); 58 59 $i = 0; 60 foreach ($this->question_templates as $template) { 61 $data = array_merge($template, ['diagnosis_id' => $this->diagnosis->id, 'order' => $i]); 62 if(@$data['id']) { 63 continue; 64 } 65 $questionTemplate = QuestionTemplate::create($data); 66 $j = 0; 67 foreach($data['choices'] as $choice) 68 { 69 $choice['question_template_id'] = $questionTemplate->id; 70 $choice['point'] = $j; 71 Choice::create($choice); 72 $j++; 73 } 74 $i++; 75 } 76 $this->question_templates = collect(QuestionTemplate::query()->with('choices')->where('diagnosis_id', $this->diagnosis->id)->get()->toArray()); 77 } 78 79 public function render() 80 { 81 return view('livewire.question-templates'); 82 } 83} 84
question-templates.blade.php
php
1<section class="text-gray-600 body-font overflow-hidden"> 2 <div class="container px-5 py-12 mx-auto"> 3 <form wire:submit.prevent="save"> 4 {{-- <x-jet-validation-errors class="mb-4" /> --}} 5 <div class="flex flex-wrap -m-4"> 6 @foreach ($question_templates as $question_template) 7 @php 8 $loop_index = $loop->index; 9 @endphp 10 <div class="p-4 md:w-3/4 w-full" wire:key="question_template-{{ Str::uuid() }}"> 11 <div class="h-full p-6 rounded-lg border-2 border-gray-300 flex flex-col relative overflow-hidden"> 12 Q{{ $loop->iteration }}. 13 <p class="flex items-center text-gray-600"> 14 <input wire:model.debounce.400ms="question_templates.{{ $loop_index }}.content" type="text" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"> 15 </p> 16 <span class="text-sm text-red-600 mb-2"> 17 @error("question_templates.$loop_index.content"){{ $message }}@enderror 18 </span> 19 軸 20 <p class="flex items-center text-gray-600"> 21 <select 22 wire:model="question_templates.{{ $loop_index }}.axis_id" 23 class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10"> 24 <option value="">選択してください</option> 25 @foreach ($axises as $axis) 26 <option 27 value="{{ $axis->id }}">{{ $axis->title }}</option> 28 @endforeach 29 </select> 30 </p> 31 <span class="text-sm text-red-600 mb-2"> 32 @error("question_templates.$loop_index.axis_id"){{ $message }}@enderror 33 </span> 34 @foreach ($question_template['choices'] as $choice) 35 選択肢{{ $loop->iteration }} 36 <p class="flex items-center text-gray-600"> 37 <input 38 wire:model.debounce.400ms="question_templates.{{ $loop_index }}.choices.{{ $loop->index }}.content" type="text" class="w-1/2 bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"> 39 </p> 40 <span class="text-sm text-red-600 mb-2"> 41 @error("question_templates.$loop_index.choices.$loop->index.content"){{ $message }}@enderror 42 </span> 43 @endforeach 44 <div class="mt-2 flex justify-end cursor-pointer"> 45 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 46 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> 47 </svg> 48 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 49 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> 50 </svg> 51 </div> 52 </div> 53 </div> 54 @endforeach 55 </div> 56 <div class="mt-8 flex justify-center cursor-pointer"> 57 <button class="w-1/2 text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">保存</button> 58 </div> 59 </form> 60 <div class="mt-2 flex justify-end cursor-pointer"> 61 <svg wire:click="push_question_template" xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 62 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> 63 </svg> 64 <svg wire:click="pop_question_template" xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 65 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> 66 </svg> 67 </div> 68 </div> 69</section> 70
具体的にあなたはこの問題について何を試行錯誤されましたか？問題があるからと言ってやりたい事を丸投げしているのでしょうか？
Laravelのバージョン、利用しているライブラリ、利用しているライブラリのバージョン、開発環境についても明示すべきです。
あなたの回答
tips
プレビュー
