CRUD with categories

#1

What seems to be the problem:
My select input doesn’t send any value to a CRUD component

Steps to Reproduce:
This is my livewire CRUD component.

namespace App\Http\Livewire;

use App\Models\Category;
use Livewire\Component;
use App\Models\Post;
use Livewire\WithPagination;
use Livewire\WithFileUploads;

class Posts extends Component
{
    public $title, $categories, $category_id, $body, $post_id, $search, $img;
    public $isOpen = 0;

    use WithFileUploads;
    use WithPagination;

    public function mount()
    {
        $this->categories = Category::all();
    }

    public function render()
    {
        $search = '%' . $this->search . '%';
        $posts  = Post::where('title', 'LIKE', $search)
            ->orWhere('body', 'LIKE', $search)
            ->latest()->paginate(5);
        return view('livewire.posts.posts', ['posts' => $posts]);
    }

    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }

    public function openModal()
    {
        $this->isOpen = true;
    }

    public function closeModal()
    {
        $this->isOpen = false;
    }

    private function resetInputFields()
    {
        $this->category_id      =      '';
        $this->title            =      '';
        $this->body             =      '';
        $this->post_id          =      '';
    }

    public function store()
    {
        $this->validate([
            'category_id'    =>    'required',
            'title'                 =>    'required',
            'body'               =>    'required',
            'img'                 =>    'image|max:1024'
        ]);

        Post::updateOrCreate(
           ['id'                    =>    $this->post_id],
           ['category_id'    =>    $this->category_id,
            'title'                 =>    $this->title,
            'body'               =>    $this->body,
            'img'                 =>    $this->img->hashName(),
        ]);

        if(!empty($this->img)) {
            $this->img->store('public/docs');
        }

        session()->flash('message',
            $this->post_id ? 'Пост успешно обновлен.' : 'Пост успешно создан.');

        $this->closeModal();
        $this->resetInputFields();
    }

    public function edit($id)
    {
        $post                           =     Post::findOrFail($id);
        $this->category_id      =     $post->category_id;
        $this->post_id             =     $id;
        $this->title                   =     $post->title;
        $this->body                 =     $post->body;
        $this->img                   =     $post->img;
        $this->openModal();
    }

    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Пост успешно удален.');
    }
}

This is a select input from my blade view ‘create new post’.

<select class="form-select" aria-label="Default select example">
    <option selected>Выберите категорию</option>
    @foreach($categories as $category)
        <option wire:modal="category_id" value="{{ $category->id }}">
            {{ $category->name }}
        </option>
    @endforeach
    @error('category_id') <span class="text-red-500">{{ $message }}</span>@enderror
</select>

Even my validation doesn’t work. I know exactly, that the problem is in select input, cuz my CRUD component worked perfectly before I added categories there. Please, help me

Are you using the latest version of Livewire:
yes

#2

Hey, @nataly

You must put the wire:model="category_id" in select tag not in the option

<select wire:model="category_id">
 <option> ...</option>
</select>
#4

I did so, but the result is the same((( even validation doesn’t work. After I fill all the fields and press the button “save” nothing happens, my small modal window of creating posts is still on my screen

#5

Could you show us the blade view code of that component? You have to select a category and after fill a new post in it…understand that well? I use modals in an actual project but open and close them using little js code after dispatch events.

#6

Yeah. When I was coping my code to reply you, I suddenly found out, that it works perfectly!! Idk what was happened with it, but now it’s ok. Thank you for replying me​:pray::pray::pray:

p.s. you made my day😁

and I don’t use any js for my forms. Idk javascript(

#7

I saw that you use an openModal() method thought that you was using bootsrap modal. Hope all its ok then.

#9

oops) yes, I meant, no any javascript, written by me.

btw can I ask you? yesterday, when I was looking for a solution, I found one comment on russian stack overflow. That guy wrote, no good developer used livewire, it was a bad framework etc. what do you think? is he right?

#10

Livewire is a recently frontend framework for laravel. Definitly I think that others are better and most used, but don’t means that its bad. If you know Vuejs or another use it, but if you are learning this is a good first step. For now and for my project requirements, it has accomplish my goals. Maybe another advice be more successful for you but I think that all is good while works well jjjj

1 Like
#12

Thank you for the reply) happy new year😄

#13

Same for you :partying_face: :partying_face::+1: