laravel form model binding and vuejs - laravel

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).

Related

Livewire #entangle issue with mutliple post

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.

laravel blade #include with localised variable

I have this code:
#include('admin.members.members_form', ['submitButtonText' => '__('member.edit')'])
and in the admin.members.members_form:
{!! Form::submit($submitButtonText, ['class' => '"btn btn-primary"']) !!}
THe inclusion is not working (with this version I have an error with single quote, I tryied with \'member.edit\' have no error but whe button with text __('member.edit')
you can do like that (without quote)
#include('admin.members.members_form', ['submitButtonText' => __('member.edit')])

Laravel & LaravelCollective The first argument should be either a string or an integer

Im trying to create DELETE button in my Laravel CRUD app. and have an error:
(2/2) ErrorException array_key_exists(): The first argument should be either a string or an integer
My view:
{{!!Form::open(['action' => ['CompanyController#update', $company->id], 'method' => 'PUT'])!!}}
{{Form::input('Delete',['class'=>'btn btn-danger'])}}
{{!!Form::close()!!}}
I'm using Laravel Collective documentation and it says I can use:
Form::open(['action' => ['Controller#method', $user]])
But whats wrong with my code?
You must provide the key. Collective won't try to guess the key name, as we are used to on Laravel.
Form::open(['action' => ['Controller#method', $user->id]])
The piece of code above shows how to provide the key: $user->id

Html in translation files

I use Laravel 5 with internationalization. Within the array where I store my key => values of all the languages used in the site I would like to add some html for styling the text:
lang_de.php
'error_message' => '<b>This is </b><br>a custom error<span style="color:red; font-weight: bold">message</span>',
This does not seem working for me. Any ideas what is wrong?
In my blade file I load it like this:
{!! trans('site.error_message') !!}
Thank you

Laravel 5 routing within blade

up until this point I have essentially been using resource routing. One of my routes is for projects. If I create a project and then SHOW it, I see a URL in the form of
myUrl/projects/1
On the show page for a project, I want to be able to add a document. I have set up the relationships so a project can have one document and a document belongs to a project. I then set up the following route to handle the saving of the documents data
Route::post('projects/{id}/docOne', 'DocOneController#store');
So I add an a form in projects/show.blade.php, which opens like so
{!!
Form::model(new App\DocOne, [
'class'=>'form-horizontal',
'route' => ['docOne.store']
])
!!}
I then have my form fields and a save data button. Because of this new form within my projects show page, when I now show a project, it complains that the route for this new form is not defined.
How can I get this route to work within the projects show page?
Thanks
First of all you need to define a route name to your route, if you want to call it by his name.
So your route would be like:
Route::post('projects/{id}/docOne', [ //you need an array to set a route name
'as' => 'docOne.store', //here define the route name
'uses' => 'DocOneController#store' //here the callback
]);
Second you need to change your laravel form to use your route name and set the id
{!! Form::model(new App\DocOne, [
'route' => ['docOne.store', $project], //if you have setted the id variable like $id blade it gonna retturn it automatically only by passing the object, else, you can set $project->id
'method' => 'POST']
) !!}
EDIT:
You can't get an instance of a model on your view.
So the part:
{!! Form::model(new App\DocOne,
gonna fails every time you trye, also, the form:model needs an instance of a class that should have your vars filled with the info that the inputs should have (when you edit it).
You have two solutions:
If it's a new Doc and never before exist on your dataBase
I recomend to change your
Form::model
to:
Form::open
if it's a Doc thath already exist on your DB, like an edit, so in your controller you need to pass your existing Docas $docand remplace the: {!! Form::model(new App\DocOne, to:
{!! Form::model($doc,
and it works.
Form model was created to fill the input values with the data existing in your object instance, like when you edit someting.
So you need to have a correct instance.
Another think it's the MVC scope, a view shouldn't have acces to models, except if are passed by the controller.
Ok that's all.

Resources