laravel Livewire wire: нажмите, чтобы не запускать функцию

ProgramBox

laravel Livewire wire: нажмите, чтобы не запускать функцию

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#javascript #html #laravel #typescript #laravel-livewire

#javascript #HTML #laravel #typescript #laravel-livewire

Вопрос:

Я хочу сделать SPA с laravel livewire, я хочу использовать wire: нажмите, чтобы запустить функцию в компоненте, но она не работает, извините, если я впервые публикую здесь беспорядок в коде, и я не уверен, что опубликовать здесь в моем коде, чтобы решить эту проблему. спасибовы

main.blade.php

 @section('content')
<div>
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card my-3">

                        <!-- header -->
                <div class="card-header d-inline-flex">
                    <h3 class='mr-2'>Categories</h3>
                    <div>
                        <a href="javascript:void(0);" wire:click='createCategory' class="btn btn-success ">Add NewCategory</a>
                    </div>
                </div><!-- header -->
                <div class="card-body">

                    <!-- alerts -->
                    @include('admin.includes.alerts.errors')
                    @include('admin.includes.alerts.success')
                    <!-- alerts -->


                    <!-- if True , create form will show , if not will stay disabled -->
                    @if ($showCreateForm)
                    @livewire('admin.category.create' )
                    @endif
                    <!-- if True , create form will show , if not will stay disabled -->

                    <!-- Table -->
                    <div class="table-responsive">
                        <table id="example2" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Slug</th>
                                    <th>Status</th>
                                    <th>Parent</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($categories as $category)
                                <tr>
                                    <td>{{$category->id}}</td>
                                    {{-- <td>{{storage_path(applivewire-tmp$category->image)}}" /></td> --}}
                                    <td>{{$category->name}}</td>
                                    <td>{{$category->slug}}</td>
                                    <td class=" {{$category->isActive()==='Active'? 'text-success':'text-danger'}}">
                                        {{$category->isActive()}}</td>
                                    <td>{{ !empty($category->parent) ? $category->parent->name:'' }}</td>
                                    <td>
                                        <a href="" class="btn btn-warning">Edit</a>
                                        <a href="" class="btn btn-danger">Delete</a>
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Slug</th>
                                    <th>Status</th>
                                    <th>Parent</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                        <div>
                            {!!$categories->links()!!}
                        </div>
                    </div>
                    <!-- Table -->

                </div><!-- body -->
            </div>
        </div>
    </div>
</div>
@endsection

и компонент Main.php ,

 <?php

namespace AppHttpLivewireAdminCategory;

use AppModelsAdminCategory;
use LivewireComponent;
use LivewireWithPagination;

class Main extends Component
{
    use WithPagination;

    protected $categories;
    public $showCreateForm = false;
    public $showEditForm = false;
    public function render()
    {
        $categories = Category::orderBy('id','desc')->paginate(12);
        return view('livewire.admin.category.main',[
            'categories' => $categories,
        ]) ->layout('layouts.admin');
    }

    public function createCategory()
    {
         $this->showCreateForm = !$this->showCreateForm;
    }
    public function update_Category($id)
    {


         $categories = Category::whereId($id);
         if ($categories) {
            $this->emit('getCategoryid' , $categories);
            $this->showEditForm = !$this->showEditForm;
            $this->showCreateForm = false;
         }
    }
    public function delete_Category($id)
    {
         $this->showCreateForm = !$this->showCreateForm;
    }
}

//// Обновить ////

я попробовал iRestWeb Answer, я думаю, что это правильный ответ, но я даже не понимаю, что происходит, это на 100% связано с javascript, и это не моя область знаний, так что вот мой полный код, я надеюсь, что кто-нибудь поймет, и еще раз извините, если мой код запутанный и доставляет вам неудобства, спасибо.

create.blade.php

 <div>
  <form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="card-body">
      <div class="row">
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputEmail1">Parent</label>
            <select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
              <option selected value> -- select an option -- </option>
              {{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
              <option value="{{$category->id}}">{{$category->name}}</option>
              @endforeach {{-- @endif --}}
            </select>
          </div>
        </div>
        <!-- 1 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputPassword1">Category Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"> @error('name') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>
        </div>
        <!-- 2 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputPassword1">Slug Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"> @error('slug') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>
        </div>
        <!-- 3 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleFormControlFile1">Image</label>
            <input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"> @error('image') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>

        </div>
        <!-- 4 -->
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
        <label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger">{{ $message }}</span> @enderror
      </div>
    </div>
    <!-- /.card-body -->
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

Expand snippet

Create.php

 <?php

namespace AppHttpLivewireAdminCategory;

use LivewireComponent;
use AppModelsAdminCategory;
use LivewireWithFileUploads;
use IlluminateSupportStr;
use LivewireWithPagination;
use InterventionImageFacadesImage;



class Create extends Component
{


use WithFileUploads;
    use WithPagination;

    public $slug , $name , $image , $parent_id , $is_active;

    protected $rules = [
        'slug' => 'required|unique:categories,slug',
        'name' => 'required',
        'image'=> 'nullable|image|max:1024'
    ];

    protected $categories;
    public function render()
    {
        $categories = Category::orderBy('id','desc')->paginate(12);
        return view('livewire.admin.category.create' , [
            'categories' => $categories,
        ]);
    }
    public function create()
    {
        $this->validate();

        $data = [
            'name' => $this->name,
            'slug' => $this->slug,
            'is_active'=> $this->is_active,
            'image'=> $this->image,
            'parent_id'=> $this->parent_id,
        ];
        //image upload
            try {
                if ($image = $this->image) {
                    $filename = Str::slug($this->name).'.'.$image->getClientOriginalExtension();
                    $path = public_path('assets/image/'.$filename);
                    Image::make($image->getRealPath())->save($path,100);
                }
                Category::create($data);
                $this->reset();
                return $this->addError('success' , 'Created Successfuly');
            } catch (Throwable $th) {
                return $this->addError('error', 'Something Wrong Happens');
            }

    }

}

Expand snippet

edit.blade.php

 <div>
  <form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update">
    @csrf
    <div class="card-body">
      <div class="row">
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputEmail1">Parent</label>
            <select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
              <option></option>
              {{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
              <option value="{{$category->id}}">{{$category->name}}</option>
              @endforeach {{-- @endif --}}
            </select>
          </div>
        </div>
        <!-- 1 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputPassword1">Category Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='{{$category->name}}' name="name"> @error('name') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>
        </div>
        <!-- 2 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleInputPassword1">Slug Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='{{$category->slug}}'> @error('slug') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>
        </div>
        <!-- 3 -->
        <div class="col-6">
          <div class="form-group">
            <label for="exampleFormControlFile1">Image</label>
            <input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
            <img value='{{$category->image}}' alt="" srcset=""> @error('image') <span class="error text-danger">{{ $message }}</span> @enderror
          </div>

        </div>
        <!-- 4 -->
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
        <label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger">{{ $message }}</span> @enderror
      </div>
    </div>
    <!-- /.card-body -->
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

Edit.php (незавершенная задача)

 <?php

namespace AppHttpLivewireAdminCategory;

use LivewireComponent;
use AppModelsAdminCategory;

class Edit extends Component
{
    protected $categories , $cat_id;
    public $slug , $name , $image , $old_image , $parent_id , $is_active;

    protected $listeners = ['getCategoryid'=>'getID'];


    public function mount()
    {
       $this->categories = Category::whereId($this->cat_id)->first();
    }//mout


    public function render()
    {
        $categories = Category::all();
        return view('livewire.admin.category.edit' , [
            'categories' => $categories,
        ]);
    }//render

    public function update($id)
    {

    }//update

    public function getID($categories)
    {
        $this->categories = $categories;

        // Data
        $this->slug = $this->$categories['slug'];
        $this->name = $this->$categories['name'];
        $this->image = $this->$categories['image'];
        $this->old_image = $this->$categories['old_image'];
        $this->parent_id = $this->$categories['parent_id'];
        $this->is_active = $this->$categories['is_active'];

    }//getID
}

1. добро пожаловать в итак, что вы подразумеваете под неработающим, расскажите подробнее об ошибке, которая отображается

2. ссылка в заголовке карточки должна перейти и запустить функцию в Main.php компонент, поэтому, когда я нажимаю на него, он ничего не делает

3. Есть ли какие-либо ошибки в вашей консоли?

4. В сети ничего не происходит, и никаких ошибок в консоли

5. проверьте вкладку сеть, отправляет ли она что-нибудь?

Ответ №1:

Весь HTML-код должен быть покрыт единицей <div>. , тогда он будет работать.

1. Ты сделал мой день! Спасибо

2. Сработало отлично, это где-то в документации?

3. Вау, это тоже решило мою проблему — спасибо

4. Братан, это самая глупая проблема, с которой я сталкивался за всю свою жизнь, СПАСИБО. <3

5. Я потратил часы, пытаясь заставить мой код работать, и все потому, что я поставил <h2> вверху. Невероятно, что такая базовая ошибка не дает никаких указаний на причину, она просто полностью отключает Livewire без сообщений.

Ответ №2:

добавьте css и js LiveWire в base.blade.php файл, и это работает:

 <head>
...
    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

Ответ №3:

Для этого вам не нужно :click событие, вы можете просто использовать:

 wire:$toggle('property')

И вам не нужно использовать a тег; вы можете просто использовать button тег. Таким образом, ваш код кнопки будет выглядеть следующим образом:

 <button type="button" wire:$toggle='showCreateForm' class="btn btn-success">Add New Category</button>

1. спасибо за ответ, я попробую и одобрю, работает это или нет

2. это не сработало, приятель, я думаю, что это javascript, потому что он вообще не реагирует, как отключенная ссылка, это странно, очень странно

3. Вы включили css и js в livewire? пожалуйста, предоставьте полный код страницы, включая страницу макета

Ответ №4:

Я думаю, это поможет вам

 <a href="#" wire:click.prevent="$toggle('showCreateForm')" class="btn btn-success">Add New Category</a>

Ответ №5:

используйте <livewire:styles /> и <livewire:scripts /> (вместо @livewireStyles и @livewireScripts)