Livewire #entangle issue with mutliple post - laravel

I'm actually using a component I made using Livewire and AlpineJS.
The issue I got is the following :
I have a button to add a new section, in this section I can wrote title and description (wysiwyg editor) so to handle this I have in my component :
<div
x-data="{content: #entangle($attributes->wire('model')),...setupEditor()}"
x-init="() => init($refs.editor)"
wire:ignore
{{ $attributes->whereDoesntStartWith('wire:model') }}>
And in my livewire php file :
protected $rules = [
'newLesson.*.title' => 'required|string',
'newLesson.*.lesson_content' => 'required|string',
'newLesson.*.type_content' => 'required|string',
];
So in my livewire blade I have something like this :
<x-editor wire:model.lazy="newLesson.{{$i}}.lesson_content"></x-editor>
But when I try, I've got an error in my console :
SupportAlpine.js:102 Livewire Entangle Error: Livewire property
'newLesson.4.lesson_content' cannot be found
Did some of you already got this kind of issue ?
I don't really know how to handle it actually.
Thanks for your time and help :)

Worked through the issue on Livewire discord and solved it 🙂
For anyone else coming across it, the addLesson method was referencing $newLessons instead of $newLesson.

Related

laravel route::post wrong method gets called

Starting off with a bit of background information, i have 3 models - Course, Pathway, Module.
Course HAS-MANY Pathway
Pathway HAS-MANY Module
Course HAS-MANY-THROUGH Module (through Pathway)
I have set up routes for creating Course, Pathway and Module. However, when I try to save the newly created model instance, it calls the wrong route method - does not even hit the store method of the relevant Controller
I understand that the order of the routes is important. I tried changing them around but it still does not work as intended.
Here's what I have so far
:
// modules
Route::get('/courses/{course}/edit/pathways/{pathway}/modules/create', [App\Http\Controllers\ModulesController::class, 'create'])->name('createModule');
Route::post('/courses/{course}/edit/pathways/{pathway}/modules', [App\Http\Controllers\ModulesController::class, 'store'])->name('storeModule');
// Pathways
Route::get('/courses/{course}/edit/pathways/create', [App\Http\Controllers\PathwaysController::class, 'create'])->name('createPathway');
Route::get('/courses/{course}/pathways/{pathway}/edit', [App\Http\Controllers\PathwaysController::class, 'edit'])->name('editPathway');
Route::delete('/courses/{course}/pathways/{pathway}', [App\Http\Controllers\PathwayController::class, 'destroy'])->name('destroyPathway');
Route::post('/courses/{course}/edit/pathways', [App\Http\Controllers\PathwaysController::class, 'store'])->name('storePathway');
// VQs/Qualifications
Route::resource('courses', App\Http\Controllers\CourseController::class, [
'names' => [
'index' => 'allCourses',
'create' => 'createCourse',
'store' => 'storeCourse',
'show' => 'showCourse',
'edit' => 'editCourse',
'update' => 'updateCourse',
'destroy' => 'destroyCourse',
]
]);
The problem is that when I try to store a Pathway or Module, it hits the Route::post('/courses/{course}') route.
I tried changing around the order of the routes, but none of that worked. I've also made sure that the create forms action is of the right Url Route. its all still the same.
I also can't tell which controller method is being called. Tried doing a dd() on CourseController#create, PathwaysController#create, ModulesController#create but none of them get hit.
Any help as to why this is happening will be greetly appreciated
Edit
here are some of my routes:
Since your URLs are quite similar.
How about refactoring your URL.
Also, writing a cleaner code would save you lots of headaches.
At the top:
<?php
use App\Http\Controllers\ModulesController;
use App\Http\Controllers\PathwaysController;
Route::name('modules.')->prefix('modules/courses')->group(function()
Route::get(
'{course}/edit/pathways/{pathway}/create', //e.g: modules/courses/engligh/edit/pathways/languages/create
[ModulesController::class, 'create']
)->name('create'); //modules.create
Route::post(
'{course}/edit/pathways/{pathway}',
[App\Http\Controllers\ModulesController::class, 'store']
)->name('store'); //modules.store
});
Route::name('courses.')->prefix('courses')->group(function()
Route::get(
'{course}/edit/pathways/create', //e.g: courses/english/edit/pathways/create
[PathwaysController::class, 'create']
)->name('create'); //courses.create
Route::get(
'{course}/pathways/{pathway}/edit',
[App\Http\Controllers\PathwaysController::class, 'edit']
)->name('edit');//courses.edit
Route::delete(
'{course}/pathways/{pathway}',
[App\Http\Controllers\PathwayController::class, 'destroy']
)->name('destroy');//courses.destroy
Route::post(
'{course}/edit/pathways',
[App\Http\Controllers\PathwaysController::class, 'store']
)->name('store');//courses.store
});
Run php artisan route:list to view your routes
Fixed it. Turns out there wasn't a problem with my routes at all.
The problem was that I had vertical navs and tab-panes on that page, and most of them had a form in them. I had not closed the form in one of the tab-panes and so this form was getting submitted to the action of the form above in that page.
i.e. Make sure to close forms using:
{{ Form::close() }}

MethodNotAllowedHttpException in RouteCollection

I have the MethodNotAllowedHttpException error when I try to update a data
I try to change the Form::model route to PUT and PATCH
Here's my form::model:
{!! Form::model($mission, ['route' => ['missions.update', $mission->id_missions], 'method' => 'PUT', 'class' => 'form-horizontal panel']) !!}
And here's my route:
Route::resource('missions', 'MissionsController');
I got the error mentionned above
Can somebody help me please ?
Maybe you forgot to spoof the PUT method in your form, you can do that by using blade's #method('PUT').
This is how you can implement it :
<form action="/foo/bar" method="POST">
#method('PUT')
</form>
So try also changing the form's method to POST when you use the Form::model helper because HTML forms can only be sent by GET or POST methods hence why one has to spoof the other CRUD methods.
You can read more about that here.

laravel form model binding and vuejs

I am having an issue while binding from data with my model. When I load the edit page for editing a resource, I can see the input value in the input but it disappears asap since its binded to the vuejs.
Here is my vuejs data
data: {
form: new Form({
title: '',
language: [],
poster: ''
})
},
and my inputs are like this
{!! Form::model($movie, ['class' => 'form-horizontal', '#submit.prevent' => 'form.updateMovie', 'id' => 'update-movie-form', 'files' => true, '#keydown' => 'form.errors.clear($event.target.name)']) !!}
....
{!! Form::text('title', 'movie title', ['class' => 'form-control', 'id' => 'title', 'v-model' => 'form.title']) !!}
....
{!! Form::close() !!}
How I can get around this issue?
I've had exactly the same issue today.
The Vue.js version 1 allows us to provide initial values to the v-model via value attribute, but this functionality was deprecated on the version 2.0.
Migration guide says:
v-model no longer cares about the initial value of an inline value attribute. For predictability, it will instead always treat the Vue instance data as the source of truth.
Credit where credit due: https://www.npmjs.com/package/vue-data-scooper
The author of that plugin (and quote) identifies a change in Vue.js, and wrote the vue-data-scooper plugin as a work-around (to restore the former functionality).
I'm now using the plugin myself (following the instructions on the above link) and can confirm it "resolves" the issue you're seeing.
I don't wish to duplicate the existing instructions found in the plugin's documentation, but I didn't find they aligned precisely with the Laravel installation I was using (v5.4).
Specifically I installed the plugin...
npm install vue-data-scooper
...then patched my app.js (which is extremely minimal in my case)...
require('./bootstrap');
window.Vue = require('vue');
import VueDataScooper from "vue-data-scooper"
Vue.use(VueDataScooper);
...and dropped the data: {...} declaration from my new Vue(...) declarations (allowing the plugin to sort it out using initial data).

vue vf-form can't get ajax data

I have a problem with ajax from vue vf-form.
I have wizard in this project as registration process.
So every step I'have a different view.
Code:
<wizard-hidden-step
title="About your company"
v-ref:head2
:valid="valid.step2"
:locked="isLocked"
:loading="isSending"
>
#include('auth.steps.step2', ['action' => "/company/signup/step2"])
</wizard-hidden-step>
{{-- ====== STEP 3 - ADDITIONAL INFO ========= --}}
<wizard-hidden-step
title="Additional information"
description="Add company additional info"
v-ref:head3
:valid="valid.step3"
:locked="isLocked"
:loading="isSending"
>
#include('auth.steps.step3', ['action' => '/company/signup/step3'])
</wizard-hidden-step>
And on all view I have a similar data but I will insert the code where i can't get ajax data:
<vf-form ajax
action="{{ $action }}"
method="POST"
:validation="validation"
v-ref:step2
>
PHP Laravel Controller:
return json_encode([ 'shared' => [ 'status' => 'ok', 'postcodes' => $postcodes ] ]);
After that I have ajax data in console (see on picture) but I can't set that data on view in vf-select:
<vf-select
:items="shared.postcodes"
multiple
select2
err-msg="Postcodes"
name="postcodes"
:html="true"
:value=""
v-ref:postcodes
:options="{showDropdowns: true, width: '100%'}"
>
</vf-select>
I have just No results found in vf-select.
Please help me, I don't have idea what to do.
I've found solution.
I was send shared object from backend and when I edit that in share, and on frontend read that as a shared this was work. I don't know how but it work...

Laravel 5 multiple paginations on one page

I'm trying to have 2 paginations on a single page.
View:
{{!! $items->appends(['page2' => Request::input('page2', 1)])->render() !!}}
But it is not working, as using custom $pageName for pagination ($items->setPageName('custom_page_parameter')) links are not working in laravel 5.
https://stackoverflow.com/questions/29035006/laravel-5-pagination-wont-move-through-pages-with-custom-page-name
Here is how I did it in laravel 4:
Laravel Multiple Pagination in one page
What is Laravel 5 way of doing this?
I've spent far too much time trying to find out how to do this, so thought I'd share my findings in case there is another poor soul like me out there. This works in 5.1...
In controller:
$newEvents = Events::where('event_date', '>=', Carbon::now()->startOfDay())
->orderBy('event_date')
->paginate(15,['*'], 'newEvents');
$oldEvents = Events::where('event_date', '<', Carbon::now()->startOfDay())
->orderBy('event_date', 'desc')
->paginate(15,['*'], 'oldEvents');
Then continue as usual in the view: `
// some code to display $newEvents
{!! $newEvents->render() !!}
// some code to display $oldEvents
{!! $oldEvents->render() !!}
Now, what this doesn't do is remember the page of $oldEvents when paging through $newEvents. Any idea on this?
References:
pull request addressing the original issue
API docs for method
$published = Article::paginate(10, ['*'], 'pubArticles');
$unpublished = Article::paginate(10, ['*'], 'unpubArticles');
The third argument for paginate() method is used in the URI as follows:
laravel/public/articles?pubArticles=3
laravel/public/articles?unpubArticles=1
In Controller:
$produk = Produk::paginate(5, ['*'], 'produk');
$region = Region::paginate(5, ['*'], 'region');
in view:
{{$produk->appends(['region' => $region->currentPage()])->links()}}
{{$region->appends(['produk' => $produk->currentPage()])->links()}}
reference to :[Laravel 5] Multi Paginate in Single Page
Try using the \Paginator::setPageName('foo'); function befor buidling your paginator object:
\Paginator::setPageName('foo');
$models = Model::paginate(1);
return view('view_foo', compact('models'));
This question might help too: Laravel 5 pagination, won't move through pages with custom page name
Also note there is a bug atm: https://github.com/laravel/framework/issues/8000

Resources