سلام دوستان
من یه input دارم که با livewire مقدارشو میگیرم و اوکیه کار میکنه
حالا یه دکمه گذاشتم که وقتی روش کلیک شد همین input رو با جیکوئری اضافه میکنه به صفحه
ولی مقدار input که به این صورت اضافه شده null برمیگرده
مقدار name های input ها رو هم به صورت text.0 و text.1 و.... امتحان کردم نشد
با مقدار name های text[] هم نشد
کسی میدونه چرا؟
تشکر 🌺🌸
آرمین جان اضافه کردن input رو با استفاده از خود liveware باس انجام بدی
و میتونی از alpinejs هم استفاده کنی
jquery گزینه ای مناسبی نیست
کد کامپوننت :
<div>
<form wire:submit.prevent="store">
<div class="form-row">
<div class="form-group col-md-12">
<div class="accordion accordion-light custom-accordion">
<div class="accordion-row open">
<a href="#" class="accordion-header">
<span>گالری تصاویر نمونهکار</span>
<button type="button" class="btn btn-sm btn-success" onclick="addImageInput()">
<i class="ti-plus m-r-5"></i> افزدون عکس
</button>
</a>
<div class="accordion-body mt-3" id="galleryArea">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mt-3">
<div class="d-flex align-items-center">
<span class="mx-2">ثبت</span>
<div wire:loading wire:target="store">
<div class="spinner-border spinner-border-sm text-light"></div>
</div>
</div>
</button>
<a href="{{ route('admin.works.index') }}" class="btn btn-secondary mt-3 ml-2">بازگشت</a>
</div>
</form>
</div>
کد مدلش (متغیر یا کنترلر کامپوننت) :
<?php
namespace App\Http\Livewire\Admin\Works;
use Livewire\Component;
use Livewire\WithFileUploads;
class GalleryCreate extends Component
{
use WithFileUploads;
public $images;
public function store()
{
dd($this->images);
}
public function render()
{
return view('livewire.admin.works.gallery-create');
}
}
کد جی کوئری برای ایجاد input جدید :
<script>
function setCustomFileLabel(element, label) {
var fileName = $(`#${element}`).val().split("\\").pop();
$(`#${element}`).next(`#${label}`).html(fileName);
Livewire.emit('refreshComponent');
}
var imageNum = 0;
function addImageInput() {
$('#galleryArea').append(
`<div id="imageInput-${imageNum}" class="form-group row d-flex justify-content-start align-items-baseline"><label for="images.${imageNum}" class="col-sm-2 col-form-label">یک تصویر انتخاب کنید</label><div class="custom-file col-sm-4"><input wire:model.lazy="images.${imageNum}" type="file" onchange="setCustomFileLabel('customFile-${imageNum}','customFileLabel-${imageNum}')" class="custom-file-input" id="customFile-${imageNum}"><label wire:ignore class="custom-file-label" id="customFileLabel-${imageNum}" for="images.${imageNum}">انتخاب فایل</label></div><div class="custom-file col-sm-2 ml-5"><button type="button" onclick="deleteImageInput('imageInput-${imageNum}')" class="btn btn-sm btn-danger mt-1"><i class="ti-trash m-r-5"></i> حذف</button></div></div>`
);
imageNum += 1;
}
function deleteImageInput(id) {
$(`#${id}`).remove();
}
</script>
آرمین جان اضافه کردن input رو با استفاده از خود liveware باس انجام بدی
و میتونی از alpinejs هم استفاده کنی
jquery گزینه ای مناسبی نیست
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟