Level 15
any help with this ?
Jun 6, 2015
9
Level 15
vue send an empty value and response is the field required
hello every one
today i start to work with vuejs
and my form is just having field (name) and submit button
so when i try to debug the post request it send whatever i put in the input field and after submitting the form its only send empty string and the response is the field name is required
this is my code
the JS app file
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
new Vue({
el: '#create-form',
data: {
newName: '',
},
methods: {
onSubmitForm: function(e) {
e.preventDefault();
var name = this.newName;
this.newName = '';
this.$http.post('manufacturer', name);
}
}
});
the HTML view
<div id="create-form" class="module-body">
<form method="POST" v-on="submit: onSubmitForm">
<div class="form-group">
<label for="name">
Manufacturer Name:
</label>
<input type="text" name="name" id="name" class="form-control" v-model="newName">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">
Add Manufacturer
</button>
</div>
</form>
<pre>
@{{ $data | json }}
</pre>
</div>
and this is my Store Method it work fine with normal form
public function store(ManufacturerRequest $request)
{
Manufacturer::create($request->all());
return redirect()->action('ManufacturersController@index');
}
Level 41
I think you need to pass an object to the store method, maybe something like :
this.$http.post('manufacturer', {name: name});
Level 15
@RachidLaasri i try to do this not working still i have the response 422 {"name":["The name field is required."]}
Level 15
still any body can help with this please
Level 88
Your v-model should be called name
<input type="text" class="form-control" v-model="name"></div>
data: {
name: '',
},
methods: {
var newName = this.name;
onSubmitForm: {
this.$http.post('link', newName);
}
}
Level 15
@bobbybouwmann phpstorm show me error in ur code and browser show me TokenMismatchException in VerifyCsrfToken.php line 53:
Level 88
You shouldn't be copying it.. Think for yourself! The basic idea is that value in your data should be the same as your model!
Level 15
@bobbybouwmann well i didnt copy it first because i fix the code like this
new Vue({
el: '#create-form',
data: {
name: '',
},
methods: {
onSubmitForm: function(e) {
e.preventDefault();
var newName = this.name;
this.name = '';
this.$http.post('manufacturer', newName);
}
}
});
but it wasnt work as it give same thing 422 error so i try to copy it and give me the error
also
i try in my view
<input type="text" id="name" class="form-control" v-model="name">
even if i remove the validation its only send empty string to the controller
does it have a problem if i use resource ??
Route::resource('manufacturer', 'ManufacturersController');
Level 15
@bobbybouwmann i found the solution
just make the data as array >_<
data: {
newInput: { name: ''},
},
onSubmitForm: function(e) {
e.preventDefault();
var input = this.newInput;
this.newInput = { name: ''};
this.$http.post('manufacturer', input);
}
<input type="text" name="name" id="name" class="form-control" v-model="newInput.name">
is there some explanation why its accept it as array ?? and not as normal var ?
or i miss understand something >_<
Please or to participate in this conversation.