Level 122
you seem to not be passing data to the updateTag event. Check in javascript if the event is being fired with null data
Sep 29, 2024
4
Level 1
Please help me how i can fix this error, im new to livewire
Illuminate\Contracts\Container\BindingResolutionException Unable to resolve dependency [Parameter #0 [ $data ]] in class App\Livewire\BlogAdd
my blogAdd component
<?php
namespace App\Livewire;
use App\Models\Category;
use App\Models\Tag;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\WithFileUploads;
class BlogAdd extends Component
{
use WithFileUploads;
public $thumbnail;
public $title;
public $description;
public $category_id;
public $tag = [];
public $categories;
public $tags;
public $is_published = false;
protected $listeners = ['updateTag'];
#[On('updateTag')]
public function updateTag($data)
{
dd($data);
$this->tag = array_unique($data['tag']);
}
public function mount()
{
$this->categories = Category::all();
$this->tags = Tag::all();
}
protected function rules()
{
return [
'title' => 'required|string|max:255',
'description' => 'required',
'category_id' => 'required|exists:categories,id',
'tag' => 'required|array',
'tag.*' => 'exists:tags,id',
'thumbnail' => 'required|image|max:20048|mimes:jpeg,png,jpg',
];
}
public function submit()
{
dd($this->tag);
$this->validate();
}
public function render()
{
return view('livewire.blog-add');
}
}
my blade component
<div>
<div class="py-2">
@if ($errors->any())
@foreach ($errors->all() as $error)
<x-alert type="danger" :message="$error" />
@endforeach
@endif
</div>
<form wire:submit.prevent="submit" enctype="multipart/form-data">
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Thumbnail</label>
<div class="upload-image-wrapper d-flex align-items-center gap-3">
@if ($thumbnail)
<div
class="uploaded-img position-relative h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50">
<button type="button" wire:click="removeImage('thumbnail')"
class="uploaded-img__remove position-absolute top-0 end-0 z-1 text-2xxl line-height-1 me-8 mt-8 d-flex">
<iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>
</button>
<img id="uploaded-img__preview" class="w-100 h-100 object-fit-cover"
src="{{ $thumbnail->temporaryUrl() }}" alt="server_image">
</div>
@else
<label
class="upload-file h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1"
for="upload-file">
<iconify-icon icon="solar:camera-outline"
class="text-xl text-secondary-light"></iconify-icon>
<span class="fw-semibold text-secondary-light">Upload</span>
<input id="upload-file" wire:model="thumbnail" type="file" hidden>
<div wire:loading wire:target="image">Uploading...</div>
</label>
@endif
</div>
</div>
<div class="col-12">
<label class="form-label">Title</label>
<input type="text" wire:model="title" class="form-control" placeholder="Title">
</div>
<div class="col-12">
<label class="form-label">Category</label>
<select name="category" wire:model="category_id" class="form-control">
<option selected>Select Category</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
<div class="col-12" wire:ignore>
<label class="form-label">Tags</label>
<select id="select2-tags" name="tag[]" wire:model="tag" class="form-control">
<option selected>Select Tag</option>
@foreach ($tags as $tag)
<option value="{{ $tag->id }}">{{ $tag->name }}</option>
@endforeach
</select>
</div>
<div class="col-12" wire:ignore>
<label class="form-label">Description</label>
<textarea id="myeditorinstance" wire:model="description" name="description" class="form-control"></textarea>
</div>
<div class="col-12">
<div class="form-switch switch-primary d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" wire:model="is_published" role="switch"
id="yes">
<label class="form-check-label line-height-1 fw-medium text-secondary-light"
for="yes">Publish?</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-600">Submit</button>
</div>
</div>
</form>
</div>
@assets
<script src="https://cdn.tiny.cloud/1/profov2dlbtwaoggjfvbncp77rnjhgyfnl3c2hx3kzpmhif1/tinymce/7/tinymce.min.js"
referrerpolicy="origin"></script>
@endassets
@script
<script>
$(document).ready(function() {
$('#select2-tags').select2({
placeholder: "Select Tags",
allowClear: true,
width: '100%'
});
$('#select2-tags').on('change', function() {
const selectedOptions = $(this).val();
$wire.dispatch('updateTag', { tag: selectedOptions });
});
Livewire.hook('message.processed', (message, component) => {
$('#select2-tags').select2({
placeholder: "Select Tags",
allowClear: true,
width: '100%'
});
});
});
const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST',
'{{ route('upload-image') }}'
); // Ensure this is the correct route for your upload endpoint
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
progress(e.loaded / e.total * 100); // Report upload progress
}
};
xhr.onload = () => {
console.log(xhr);
if (xhr.status === 403) {
reject({
message: 'HTTP Error: ' + xhr.status,
remove: true
});
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
// Parse the response if it's not a success status code
const json = JSON.parse(xhr.responseText);
reject({
message: json.message || 'HTTP Error: ' + xhr.status,
remove: true
}); // Handle error messages from the server
return;
}
const json = JSON.parse(xhr.responseText);
if (!json || typeof json.location !== 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
resolve(json.location); // Resolve with the URL to the image
};
xhr.onerror = () => {
reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
});
tinymce.init({
selector: 'textarea#myeditorinstance', // Replace this CSS selector to match your HTML
plugins: 'code table lists image',
images_file_types: 'jpg,png,jpeg',
image_prepend_url: `${window.location.origin}/portfolio/`,
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table | image',
images_upload_handler: example_image_upload_handler,
setup: function(editor) {
editor.on('init change', function() {
editor.save();
});
editor.on('BeforeSetContent', function(e) {
const content = e.content;
const updatedContent = content.replace(/src="\.\.\/\.\.\/portfolio/g,
`src="${window.location.origin}/portfolio`);
e.content = updatedContent;
});
editor.on('change', function(e) {
let content = editor.getContent();
// Replace relative paths with absolute paths
content = content.replace(/src="\.\.\/\.\.\/portfolio/g,
`src="${window.location.origin}/portfolio`);
@this.set('description', content);
});
}
});
</script>
@endscript
i want to add the tags value whenever a tag is selected then add that tag value in $tag like a array
Level 1
@Snapey i found the answer i was passing the wrong parameter
old:
$wire.dispatch('updateTag', { tag: selectedOptions });
as im using $data here as variable
public function updateTag($data)
{
dd($data);
$this->tag = array_unique($data['tag']);
}
i should also use in js of blade component also like this
$wire.dispatch('updateTag', { data: selectedOptions });
Level 2
I'm new in LiveWire, too. I tried to run your code with routes >web.php
<?php
use App\Http\Controllers\BlogAdd;
use Illuminate\Support\Facades\Route;
Route::middleware(['auth','verified'])->group(function()
{
Route::get('blog',[BlogAdd::class,'render']);
});
app>Http>Controllers>BlogAdd.php
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use App\Models\Tag;
class BlogAdd
{
public $thumbnail;
public $categories;
public $tags;
public function render()
{
$this->categories=Category::all();
$this->tags=Tag::all();
return view('livewire.blog-add',[
'thumbnail'=>$this->thumbnail,
'categories'=>$this->categories,
'tags'=>$this->tags]);
}
Level 1
@frankhosaka i found the answer already
Please or to participate in this conversation.