cretueusebiu / vform Goto Github PK
View Code? Open in Web Editor NEWHandle Laravel-Vue forms and validation with ease.
Home Page: https://vform.vercel.app
License: MIT License
Handle Laravel-Vue forms and validation with ease.
Home Page: https://vform.vercel.app
License: MIT License
I'm getting a 422 error while getting the return from a Laravel's Form Request Validation class, but the component are not being displayed...
POST http://project.build/save-account 422 (Unprocessable Entity)
register.js?id=51eaeeff0b3abd47a38c:5169 Uncaught (in promise) Error: Request failed with status code 422
at createError (register.js?id=51eaeeff0b3abd47a38c:5169)
at settle (register.js?id=51eaeeff0b3abd47a38c:5320)
at XMLHttpRequest.handleLoad (register.js?id=51eaeeff0b3abd47a38c:4730)
What I can do to solve this problem???
Is there any way to disable sending form again until server response ?
at the moment everything works correctly, except for the button loader, I am using laravel 5.6, which brings bootstrap 4.0.0 by default and also install font-awesome 4.7 in my project, is there any other configuration? I do not understand why I can not see the loader.
Has anyone figured out the best way to reset the form to its original state? Right now, I am popping an edit form in a modal dialog box and I am trying to clear it out on close.
Thanks for the great package firstly.
I still have the issue of showing 422 error in console after validation fails.
Here is my code.
`
methods:{
async addMember(){
try {
await this.form.post('/api/user')
this.form.reset()
alert("User Created")
} catch (e) {
// console.log(e)
}
}
}
`
When validation fails, it should give the error in console. How can I avoid the error.
Thanks.
I often explore my libs in-IDE, it would be handy if a not-minified file was distributed.
(The sourcemap doesn't get applied in IntelliJ/PHPStorm)
I use vue-auth with this code:
login () {
this.isloginting = true
this.$auth.login({
data: this.user,
rememberMe: this.checked,
success () {
this.isloginting = false
this.$router.push({ path: '/users' })
},
error (error) {
// alert(JSON.stringify(this.user.errors))
console.log(this.user.erros)
this.errors.record(error.response.data)
this.isloginting = false
}
})
}
But the vform asks to use it like this:
login () {
// Submit the form via a POST request
this.form.post('/auth/login')
.then(({ data }) => { console.log(data) })
}
Would the vform be commatable with vue-auth?
Hi,
I followed the instructions but I get the following error in my console:
Uncaught TypeError: Cannot call a class as a function
Any idea?
I want to use @nuxtjs/axios with my own handlers. Is there a way to use this axios instance instead of default one?
Hi, I don't know if this is the right place to create this issue but anyways, I'm toying around with your laravel-vue-spa starter app when I encounter this issue.
The authorization header (on your util/interceptors.js
) is not being attached if I use this library to perform ajax request (e.g. on. pages/settings/_profile.vue@update()
method). but if I use axios alone, it works.
I'm trying to re-create your starter app from scratch to get me familiarized with the setup so I did the following
npm run dev
Login and Registration works fine.
package.json
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-2": "^6.22.0",
"cross-env": "^3.2.3",
"laravel-mix": "0.*",
"svg-sprite-loader": "^0.3.0"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.2.1",
"js-cookie": "^2.1.4",
"lodash": "^4.17.4",
"sweetalert2": "^6.5.5",
"tether": "^1.4.0",
"vform": "^0.7.3",
"vue": "^2.2.6",
"vue-meta": "^0.5.5",
"vue-router": "^2.3.1",
"vuex": "^2.2.1",
"vuex-router-sync": "^4.1.2"
}
.babelrc
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime", "transform-async-to-generator"]
}
I was wondering if it's possible to add more data to the form after it's been instantiated?
For example (psuedo code):
<template>
<select v-model="form.approvers" multiple id="approvers" name="approvers"></select>
</template>
<script>
export default {
data() {
return {
form: new Form({
approvers: [],
})
}
}
mounted() {
$('#approvers').select2({
placeholder: "Enter approvers ",
});
},
methods: {
save() {
// Ex.
this.form.setData(key, value);
this.form.post();
}
}
}
</script>
I have a multi-select form input that is constructed using Select2, but using v-model="form.approvers"
on the select doesn't seem to post the selected values from select2.
Do you know of any ways around this or why it might not be grabbing the values from the select input?
Thanks! :)
I have a form with multipart/form-data and the API for the update with put/patch, I'm using the code below to upload the file but the request on the server side is empty! the inspect shows the data has been sent but the server and laravel update method shows request is empty! how can I solve it?
// Transform form data to FormData
transformRequest: [function (data, headers) {
return objectToFormData(data)
}]
}).then(() => {
// do some stuff
}).catch((e) => {
// do some stuff
}
);
For bootstrap 4 there is an issue that the is-invalid
error message won't be displayed unless it's a child element of the input.
This means for input-group
's and form-group
's, the error message isn't displayed since it's default is display:none
:
So far the only clean solution to this has been forgetting the input box itself and apply the d-flex
class onto the error message div so at least that is displayed.
What are your thoughts on applying this to the HasError
component?
Hello
I'm having trouble uploading form file to server. I follow this example. I do not know what's wrong with my code. Please help.
This is my code for post to server (When clicked Submit button)
update() {
this.form
.post('/settings/profile', {
// Transform form data to FormData
transformRequest: [
function(data) {
return objectToFormData(data)
}
]
})
.then(({ data }) => {
this.$store.dispatch('auth/updateProfile', { data })
})
}
Before upload to server I monitor the form object using console.log() the avatar field contain file data.
Then upload the file to the server, each field works correctly except for the avatar field (it is empty).
I don't understand where the data is missing
Thank you.
So I have this form and I get an user to populate the form:
form: new Form({
name: null,
email: null,
address: {
country: 'MX',
state: null,
city: null,
suburb: null,
zip: null,
number: null,
interior_number: null,
street: null
},
}),
this.form.fill(user)
Everything ok but sometimes the user.address
is null, in that cases when I call the fill
method seems like the address object is setted to null and not the full object, so in the v-model (for example form.address.street) throws an exception Cannot read property 'state' of null
MThe fill method should fill
the form as constructed don't you think? or maybe create a method like fillStrict
or something?
Hi,
i installed it via npm and use Laravel 5.5.
This is my app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import router from './router'
// vForm
import { Form, HasError, AlertError } from 'vform'
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
router
});
In chrome devtools I get the following error.
[Vue warn]: Error in data(): "ReferenceError: Form is not defined"
found in
---> <Profile> at resources\assets\js\components\settings\Profile.vue
<Settings> at resources\assets\js\components\settings\Settings.vue
<Root>
warn @ app.js:sourcemap:1356
handleError @ app.js:sourcemap:1439
getData @ app.js:sourcemap:4112
initData @ app.js:sourcemap:4069
initState @ app.js:sourcemap:4000
Vue._init @ app.js:sourcemap:5171
VueComponent @ app.js:sourcemap:5343
createComponentInstanceForVnode @ app.js:sourcemap:4620
init @ app.js:sourcemap:4437
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1443 ReferenceError: Form is not defined
at VueComponent.data (app.js:sourcemap:44878)
at getData (app.js:sourcemap:4110)
at initData (app.js:sourcemap:4069)
at initState (app.js:sourcemap:4000)
at VueComponent.Vue._init (app.js:sourcemap:5171)
at new VueComponent (app.js:sourcemap:5343)
at createComponentInstanceForVnode (app.js:sourcemap:4620)
at init (app.js:sourcemap:4437)
at createComponent (app.js:sourcemap:6092)
at createElm (app.js:sourcemap:6035)
handleError @ app.js:sourcemap:1443
getData @ app.js:sourcemap:4112
initData @ app.js:sourcemap:4069
initState @ app.js:sourcemap:4000
Vue._init @ app.js:sourcemap:5171
VueComponent @ app.js:sourcemap:5343
createComponentInstanceForVnode @ app.js:sourcemap:4620
init @ app.js:sourcemap:4437
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
---> <Profile> at resources\assets\js\components\settings\Profile.vue
<Settings> at resources\assets\js\components\settings\Settings.vue
<Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44918
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
---> <Profile> at resources\assets\js\components\settings\Profile.vue
<Settings> at resources\assets\js\components\settings\Settings.vue
<Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44921
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
---> <Profile> at resources\assets\js\components\settings\Profile.vue
<Settings> at resources\assets\js\components\settings\Settings.vue
<Root>
warn @ app.js:sourcemap:1356
warnNonPresent @ app.js:sourcemap:2516
get @ app.js:sourcemap:2557
render @ app.js:sourcemap:44928
Vue._render @ app.js:sourcemap:5075
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1356 [Vue warn]: Error in render function: "TypeError: Cannot read property 'errors' of undefined"
found in
---> <Profile> at resources\assets\js\components\settings\Profile.vue
<Settings> at resources\assets\js\components\settings\Settings.vue
<Root>
warn @ app.js:sourcemap:1356
handleError @ app.js:sourcemap:1439
Vue._render @ app.js:sourcemap:5077
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6541
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
init @ app.js:sourcemap:4443
createComponent @ app.js:sourcemap:6092
createElm @ app.js:sourcemap:6035
createChildren @ app.js:sourcemap:6163
createElm @ app.js:sourcemap:6068
patch @ app.js:sourcemap:6577
Vue._update @ app.js:sourcemap:3330
updateComponent @ app.js:sourcemap:3454
get @ app.js:sourcemap:3797
Watcher @ app.js:sourcemap:3786
mountComponent @ app.js:sourcemap:3458
Vue$3.$mount @ app.js:sourcemap:8861
Vue$3.$mount @ app.js:sourcemap:11051
Vue._init @ app.js:sourcemap:5183
Vue$3 @ app.js:sourcemap:5268
(anonymous) @ app.js:sourcemap:11163
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:11124
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
app.js:sourcemap:1443 TypeError: Cannot read property 'errors' of undefined
at Proxy.render (app.js:sourcemap:44928)
at VueComponent.Vue._render (app.js:sourcemap:5075)
at VueComponent.updateComponent (app.js:sourcemap:3454)
at Watcher.get (app.js:sourcemap:3797)
at new Watcher (app.js:sourcemap:3786)
at mountComponent (app.js:sourcemap:3458)
at VueComponent.Vue$3.$mount (app.js:sourcemap:8861)
at VueComponent.Vue$3.$mount (app.js:sourcemap:11051)
at init (app.js:sourcemap:4443)
at createComponent (app.js:sourcemap:6092)
Any idea?
I want to use the package, but in my project I do not use Bootstrap. Currently using Bulma. Is there any simple way to use the css framework without having to modify dependency?
Can you integrate the Success Alert in your Example?
Thanks! Serverjunge
Hi, i'm very new to Vue, and have simple question;
When laravel returns with 422, dev console shows the following error.
Uncaught (in promise) Error: Request failed with status code 422
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)
When we surround the await statement with a try catch, error goes away but form errors are not rendered. I want to suppress this error, and I also want to do something else when the form.post call fails.
// Register the user.
const {data} = await this.form.post('/api/register');
Thanks for this work and for your help!
Hi ,
I want to validate an array of objects but when I do the error feedback doesn't get sent back to the form field. Example I have simple form like
details : {
id: ' ',
name: ' '
}
And I'm using laravel to validate the request but when it returns the error say details.name is field is required feedback is not shown on field nor error displayed. Basically what I want to do is something simple like triggering the main field to display an error like details field required. I'm not sure if this can be handled in the laravel itself or by tweaking the form to react to this situation. Thanks in advance
Nice day,
have way to use it from a SPA (vue-cli webpack)? the Form instance make the requests and observe if flash message of validations erros, how to make it with a rest api? i try, but i can't use axios for requests.
ty
in NPM package at 19 feb 2018, not latest master
If I use a date input, VForm doesn't display the date when I use the form for change
For example
<div class="form-group"> <label>Start Date</label> <input v-model="form.start_date" type="date" name="start_date" placeholder="Start date" class="form-control" :class="{ 'is-invalid': form.errors.has('start_date') }"> <has-error :form="form" field="start_date"></has-error> </div>
When I load the vform for editing using the following, all the various inputs work correctly except for date fields
// setup the modal ready for EDIT this.editmode = true; this.form.reset(); this.form.fill(campaign);
Is there something different that I need to do for date fields compared to the other inputs?
Thanks
I am validating the fields of a form and everything works very well, however I would like to know if it is possible to remove the error class to the select fields, this works well in a field of type text that is required, when writing this remover the error class, but in a select field that is required and I choose one of the options it keeps the error class, until I realize the submit. Is it possible to remove the error clause as soon as one of the options is selected ??
vuex state
`const state ={
form: new Form({
id:null,
fullname: null,
username: null,
email: null,
password: null,
role:null
}),
}`
vuex action
`
const action ={
storeData({commit,state}){
commit('LOADING');
return new Promise((resolve, reject)=>{
let params = _.cloneDeep(state.form)
axios.post(APP_CONFIG.API_URL+'/users',params)
.then(response =>{
commit('RESET_STATE')
resolve();
})
.catch(error =>{
//commit('ERROR',error)
//reject(error)
});
});
},
}`
I've been looking for an example on loading data into a form, but haven't found anything. Looking at the code didn't really help, here's why.
Here's the PHP code:
public function get()
{
return response()->json(
[
'name' => 'My Customer',
'email' => '[email protected]',
]
);
}
My first though was that I could simply call the get
method and it would set originalData
:
this.form.get('/api/sales/customers/1')
But that doesn't seem to happen, the get
method only returns the data.
I then try to find a way to set the data from outside the form class, but that didn't work either.
I could set the data by creating a new form object, but since I already had to create one to fetch the data that seems to be wrong. What am I missing?
Hi,
first I want to say thank you for vform. I am using Laravel 5.3 and VueJS. I install vform via npm and in my bootstrap.js I have ('vform');
But I always get this error when I try to use a component with vform.
Uncaught TypeError: this.$form is not a function
Example :
[Vue data]
form = new Form({
id: '',
code: '',
fruits = [
{id: 1, name: "banana", qty:''},
{id: 2,name: "apple", qty:''},
]
});
[Vue template]
<input type="text"
v-model="form.fruits.qty"
name="qty"
id="qty"
:class="{ 'is-invalid': form.errors.has('qty') }">
<has-error :form="form" class="ml-3" field="qty"></has-error>
[Laravel validate]
$this->validate($request, [
'fruids.0.qty' => 'required|numeric'
]);
I will check validate with array, but i not know syntax in Vue template
please let me know.
Template code.
<form id="answerForm" @submit.prevent="createAnswer" @keydown="form.onKeydown($event)">
<input type="text" name="title" v-model="form.content">
</form>
<v-button type="primary" @click.prevent="answerSubmit" class="btn-sm" :loading="form.busy">Submit</v-button>
I created answerSubmit() method inside Vue.js for submit form. But does not work.
answerSubmit () {
document.getElementById('answerForm').submit()
},
PS. I'm using https://github.com/cretueusebiu/laravel-nuxt starter
i wrote this code, but i get error:
if (this.form.any() == true) {
alert('true');
}
error:
this.form.any is not a function
and this is my form:
form: new Form({
name: '',
email: '',
password: '',
type: '',
photo: '',
bio: ''
})
can you add fields for images?
I have other fields with the vform. So how do I upload the image
<div class="form-group">
<select v-model="form.category_id" id="category" name="category"
class="form-control" :class="{ 'is-invalid': form.errors.has('category') }">
<option v-for="category in categories.data" :value="category.id" v-bind:selected="category.id != null">{{category.name}}</option>
</select>
<has-error :form="form" field="category"></has-error>
</div>
<div class="form-group">
<input v-model="form.featured" id="featured" type="file" name="featured"
placeholder="Featured Image" @change="selectFile"
class="form-control" :class="{ 'is-invalid': form.errors.has('featured') }">
<has-error :form="form" field="featured"></has-error>
</div>
Just wanted to say thanks for this awesome package. Makes validation and form handling so easy!
I've used it in a bunch of internal sites already.
Really really appreciate it, thanks again! ๐
error message is not working for input type select and textarea
<div class="col-md-7">
<select v-model="form.category_id" name="category_id" class="form-control">
<option v-for="category in company_categories" v-bind:value="category.id">{{category.name}}</option>
</select>
<has-error :form="form" field="category_id"/>
</div>
<div class="col-md-7">
<textarea v-model="form.description" class="form-control" name="description" rows="4"></textarea>
<has-error :form="form" field="description"/>
</div>
Laravel has error response with this keys but it does not work if input types are select and textarea. haven't tested on other input types yet, it only work on text type for me.
Hello everyone here. am working on laravel & Vuejs project, it was working fine but suddenly developed a problem. The error started when i was installing vform. I've tried many solutions online but still not working. Your help is highly appreciated. here's the error:
npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Isoft\AppData\Roaming\npm-cache_logs\2018-12-28T01_28_24_979Z-debug.log
I have a long form with submit button at the bottom of the form. I have multiple input fields in the form marked required from sever side. So when one of the few input fields at the top of the form are left blank and I scroll down to click submit, the error message came out below each input field However, I have to scroll up all the way to the top to enter the input. How can I make it automatically scroll up to focus on the first input error?
I really appreciate it.
I really like this library and I have been using it, I have a doubt since I am not an expert, it is possible to use it without boostrap ?, right now I am using vuetify and I would like to use vform, this is possible or has some problems. I hope I remove the doubt ..
I want to know it's possible to reset specific form inputs, for example only passwords inputs after update a register.
Thanks in advanced.
hi,
can i set error for input like this:
this.form.errors.username = "some error";
sometimes error don't come from server or errors is not validation error, like simple client form validation and i need to show errors with set error method but i don't know how.
thanx for the help.
Hi,
I really like vform and I used it before. See my other Issue. In a new Laravel 5.3 (with Elixir) project with VueJS 2 I get the following error.
Uncaught TypeError: Cannot read property 'installed' of undefined(โฆ)
This my app.js and everything like vue-resource and vue-router is working. But not vue-form.
/**
* Load JavaScript dependencies
*/
require('./bootstrap');
/**
* Import Vue, VueRouter and VueForm
*/
import Vue from 'vue'
import VueForm from 'vform'
import VueRouter from 'vue-router'
/**
* Import Users Components
*/
import UsersIndex from './components/users/Index.vue'
import UsersShow from './components/users/Show.vue'
import UsersCreate from './components/users/Create.vue'
/**
* Use VueRouter and VueForm
*/
Vue.use(VueForm)
Vue.use(VueRouter)
/**
* Create Router
*/
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/users',
component: UsersIndex
},
{
path: '/users/create',
component: UsersCreate
},
{
path: '/users/:id',
name: 'user',
component: UsersShow
}
]
})
/**
* Create Vue Instance | Inject Router
*/
new Vue({
router
}).$mount('#app')
Do you have any idea?
Hello, im using vform on a custom component where im passing default data as a prop
Component 1
<template>
<my-form :original-data="report">
<template slot-scope="{form}">
//... bunch of form fields
</template>
</my-form>
</template>
report is an object received as a prop from a parent component (AKA Component 0)
And my-form component defines form:
Component 2
data () {
return {
form: new Form(this.originalData)
}
}
My problem is that when I input some data on the form, the form objects reflects the value changed for the input modified, but the report object on the "Component 1" never gets the data modified.
How could i reflect the change on "Component 1" as i need to hide some fields there with a computed property based on the value of a property on the report object.
Do you have plans for support vue-i18n?
Hello,
I use Vuejs without NodeJs.
How can I use vform?
Thanks.
i was using FormData()
for file/image upload. but i dont know how to implement with this. please help me
I want to use vform with Nuxt.js Axios Module using the code below. But it does not work properly. It does not send any requests to the server. Previously, I had used the normal axios plugin, it could work properly.
async create({ commit }, params = {}) {
commit('CREATING')
try {
const { data } = await params.form.post(`questions/${params.question}/answer`)
commit('CREATE_SUCCESS', data)
} catch (e) {
commit('CREATE_FAILURE', e.message)
}
},
The axios module. using this format
async create({ commit }, params = {}) {
commit('CREATING')
try {
const { data } = await this.$axios.$post(`questions/${params.question}/answer`)
commit('CREATE_SUCCESS', data)
} catch (e) {
commit('CREATE_FAILURE', e.message)
}
},
Is possible to be able to use form with Nuxt.js Axios Module ?
Thank you for suggestion
how to do with vform post with header multipart/form-data?
I saw your example is when select input file it do ajax file upload.
But for my case, I need to submit together with other form data. I am upload an excel file
Is there any way In your this.form.post(), to add the header info?
I'm using vforms 0.8.2 and axios 0.17. I'm new at vforms, but I ran into this issue. When you use vforms with a field being an array everything works fine, i.e.:
new Form({
description: 'some value',
documentation: null,
products: [ { code: "apple", price: 5 } , { code: "orange", price: 2.5 } ]
});
When doing a this.form.post()
from a vue method, it works as expected by sending a json to the desired url. However when you attach a file to the form data, the sent data becomes multipart (obviously for handling the file) but any array/object field (in this case products) is sent as a string "[object Object]":
The request payload sent is this one:
------WebKitFormBoundarykcEGETElI1QRyPXB
Content-Disposition: form-data; name="documentation"; filename="test.zip"
Content-Type: application/x-zip-compressed
------WebKitFormBoundarykcEGETElI1QRyPXB
Content-Disposition: form-data; name="products"
[object Object]
------WebKitFormBoundarykcEGETElI1QRyPXB--
Instead of this:
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="documentation"; filename="test.zip"
Content-Type: application/x-zip-compressed
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[0][code]"
apple
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[0][price]"
5
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[1][code]"
orange
------WebKitFormBoundaryxew11gK9NAMhdxsN
Content-Disposition: form-data; name="products[1][price]"
2.5
------WebKitFormBoundaryxew11gK9NAMhdxsN--
Unfortunately, this is my first time with vue, and node.js in general so i'm not sure how I can implement the fix, but the solution is to make sure that object parameters are properly encoded when the post request is a multipart/form-data
. I researched that flat module could flatten an object but it doesn't adhere to php notation of using brackets for array parameters.
Hello @cretueusebiu,
im very new on vuejs and im trying learn this awesome framework..
I have a simple question.
How I can implement this vform inside a v-for?
Here's an example:
https://shrib.com/#TIbHYwTTLsxgtll0Pw.b
I can't put the code in this editor, i dont know why.
what's the correct way to implement this? because when I send the form, the form send again all data not the form where I trigger the submit.
If i put this on a separate component this work as expected but its correct? I need put the forms in separate component if is inside in a v-for? its some crazy for my brain!, imagine if you have 5 or 6 forms! it would 5 or 6 components?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.