How to use vform - 10 common examples
To help you get started, we’ve selected a few vform examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
codeitlikemiley / vuetified / resources / js / pages / User / Edit.vue View on Github 
data: () => ({
/* Always Declare Your Form Object */
form: new Form({
name: null,
active: false,
roles: [],
password: null,
password_confirmation: null,
email: null,
contact_no: null,
address_1: null,
address_2: null,
city: null,
state: null,
zip: null,
country: null
}),
roles: [],
password_visible: falsedata: () => ({
/* Always Declare Your Form Object */
form: new Form({
username: null,
active: false,
roles: [],
password: null,
password_confirmation: null,
company_name: null,
first_name: null,
last_name: null,
email: null,
phone: null,
address_1: null,
address_2: null,
city: null,
state_province: null,
zip: null,
country: nullimport Vue from 'vue'
import axios from 'axios'
import AxiosMockAdapter from 'axios-mock-adapter'
import { Form, HasError, AlertError } from 'vform'
// Register the components
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
new Vue({
el: '#app',
data () {
return {
// Create the form instance
form: new Form({
username: '',
password: '',
remember: false
})
}
},
methods: {import {filter} from './filter'
// vue router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import {routes} from './routes';
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('admin-main', require('./components/admin/AdminMaster.vue'));
Vue.component('home-main', require('./components/public/PublicMaster.vue'));
// V-form
import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
window.Form = Form;
// Sweet alert 2
import swal from 'sweetalert2'
window.swal = swal;
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
window.toast = toast
const router = new VueRouter({
routes, // short for `routes: routes`
mode:'hash',toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
window.Swal = Swal;
window.Toast = Toast;
import VueProgressBar from 'vue-progressbar'
Vue.use(VueProgressBar, {
color: 'rgb(143, 255, 199)',
failedColor: 'red',
height: '3px'
});
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
/**
* Routes imports and assigning
*/
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({
mode: 'history',
routes
});
// Routes EndonOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
window.Swal = Swal;
window.Toast = Toast;
import VueProgressBar from 'vue-progressbar'
Vue.use(VueProgressBar, {
color: 'rgb(143, 255, 199)',
failedColor: 'red',
height: '3px'
});
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
/**
* Routes imports and assigning
*/
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({
mode: 'history',
routes
});
// Routes End//support moment js
import {filter} from './filter'
// vue router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import {routes} from './routes';
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('admin-main', require('./components/admin/AdminMaster.vue'));
Vue.component('home-main', require('./components/public/PublicMaster.vue'));
// V-form
import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
window.Form = Form;
// Sweet alert 2
import swal from 'sweetalert2'
window.swal = swal;
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
window.toast = toast
const router = new VueRouter({
routes, // short for `routes: routes`import Vue from 'vue'
import axios from 'axios'
import AxiosMockAdapter from 'axios-mock-adapter'
import { Form, HasError, AlertError } from 'vform'
// Register the components
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
new Vue({
el: '#app',
data () {
return {
// Create the form instance
form: new Form({
username: '',
password: '',
remember: false
})
}
},async massActivate() {
let self = this;
let selected = _.map(self.selected, "id");
let toggleStatusForm = new Form({
selected
});
try {
const payload = await axios.post(
route("api.user.massActivate"),
toggleStatusForm
);
let updated = payload.data.updated;
console.log(updated);
_.map(updated, id => {
let index = _.findIndex(self.items, { id });
self.items[index].active = true;
});
let toggleModal = swal.mixin({
confirmButtonClass: "v-btn blue-grey subheading white--text",async changeRoles(item) {
let self = this;
let toggleModal = swal.mixin({
confirmButtonClass: "v-btn blue-grey subheading white--text",
buttonsStyling: false
});
self.rolesForm.roles = item.roles;
try {
self.rolesForm.busy = true;
const payload = await self.rolesForm.post(
route("api.user.roles.sync", { id: item.id })
);
item.permissions = payload.data.permissions;
self.rolesForm.busy = false;
self.rolesForm = new Form({
roles: []
});
toggleModal.fire({
title: "Success",
html: `<p class="title">User Role Change!</p>`,
type: "success",
confirmButtonText: "Back"
});
} catch (errors) {
toggleModal.fire({
title: "Error!",
html: `<p class="title">${errors.response.data.message}</p>`,
type: "error",
confirmButtonText: "Back"
});
self.rolesForm.busy = false;vform
Handle Laravel-Vue forms and validation with ease.
