I have a form where I am trying to switch between province or state depending on the country chosen in a select box. In my DB Canada = 001 and USA = 002. Here is my code:
<form action="{{ route('store') }}" method="post" id="vueApp" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="col-md-12 mb-4">
<label for="student[country]">Country</label>
<select class="form-control form-control-sm col-md-6" id="student[country]" name="student[country]" v-model="country">
<option value selected>None</option>
#foreach($countries as $code => $description)
<option value="{{ $code }}">{{ $description }}</option>
#endforeach
</select>
</div>
<div v-if="country == '001'" class="col-md-12 mb-4">
<label for="student[province]">Province</label>
<select class="form-control form-control-sm col-md-6" id="student[province]" name="student[province]">
<option value>None</option>
#foreach($states_provinces->where('xcomment', 'Canada')->pluck('short_desc', 'state_code') as $code => $description)
<option value="{{ $code }}" {{ old('student.province') == $code ? 'selected' : '' }}>{{ $description }}</option>
#endforeach
</select>
</div>
<div v-else-if="country == '002'" class="col-md-12 mb-4">
<label for="student[province]">State</label>
<select class="form-control form-control-sm col-md-6" id="student[province]" name="student[province]">
<option value selected>None</option>
#foreach($states_provinces->where('xcomment', 'USA')->pluck('short_desc', 'state_code') as $code => $description)
<option value="{{ $code }}" {{ old('student.province') == $code ? 'selected' : '' }}>{{ $description }}</option>
#endforeach
</select>
</div>
<div v-else>
<input type="hidden" class="form-control form-control-sm col-md-6" id="student[province]" max="255" name="student[province]" value="">
</div>
</form>
<script>
(function(){
var $country = '{{ old('student.country') }}';
var app = new Vue({
el: '#vueApp',
data: {
country: $country === '' ? '001' : $country,
},
});
</script>
It shows both province and state in the form no matter which country is chosen. Nothing changes, any help would be gladly appreciated! I did previously have an error, "Uncaught TypeError: Vue is not a constructor", but I was able to remove that error by removing the '$' before (function()) after the script tag. Still the same result, looks like it isn't recognizing my vue directives.
Result
Picture of interlinkage between forms and fields.
I have searched this forum for an answer, as I suspect this has been asked before, but I haven't managed to find an answer.
I just picked up using Vue and Laravel, where I am building a form. Right now I am building a test to learn how to do it before I add complexity. The right form consists of 1 select-box and 3 text fields.
My requirements for the form are:
One button to duplicate the entire form.
One button in each form (also ones that are duplicated), which adds the 3 input-text fields in the form, by duplication the fields in the div called "registration_grid". One form may require the text-fields to be duplicated 10 times, others only 1 or 2...
I realize the code is a bit messy in its context, but it is put together by various pieces I found in tutorials along the way.
var app = new Vue({
el: '.container',
data: {
workouts: [
{
workout_unit: '',
workout_weight: '',
workout_comment: ''
}
]
},
methods: {
addNewEmployeeForm () {
this.workouts.push({
workout_unit: '',
workout_weight: '',
workout_comment: ''
})
},
deleteEmployeeForm (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addNewEmployeeForm">Add form fields</button>
<div class="card" v-for="(workout, index) in workouts">
<div class="card-body">
<i class="far fa-trash-alt float-right" #click="deleteEmployeeForm(index)"></i>
<h4 class="card-title">Test form - #{{index}}</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workout.workout_unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workout.workout_weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workout.workout_comment">
</div>
</div>
</div>
</div>
Can this be done by Vue, and if so how?
You need to access the form data with workouts[index].unit for the v-model instead of workout.workout_unit
var app = new Vue({
el: '.container',
data: {
workouts: [
{
unit: '',
weight: '',
comment: ''
}
]
},
methods: {
addRow () {
this.workouts.push({
unit: '',
weight: '',
comment: ''
})
},
deleteRow (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addRow">Add form fields</button>
<div class="card" v-for="(workout, index) in workouts">
<div class="card-body">
<i class="far fa-trash-alt float-right" #click="deleteRow(index)"></i>
<h4 class="card-title">Test form - {{index}}</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
</div>
</div>
</div>
</div>
</div>
Modified example to only duplicate the input fields
var app = new Vue({
el: '.container',
data: {
workouts: [
{
unit: '',
weight: '',
comment: ''
}
]
},
methods: {
addRow () {
this.workouts.push({
unit: '',
weight: '',
comment: ''
})
},
deleteRow (index) {
this.workouts.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div class="container">
<button class="btn btn-primary" type="button" name="button" #click="addRow">Add form fields</button>
<div class="card">
<div class="card-body">
<h4 class="card-title">Test form</h4>
<div class="employee-form">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="registration_grid" v-for="(workout, index) in workouts">
<input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
<input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
<input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
<i class="far fa-trash-alt float-right" #click="deleteRow(index)"></i>
</div>
</div>
</div>
</div>
</div>
I have a problem binding a select on Server side blazor. The passed on the onchange event is the options text(label).
Here is my select element:
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<select class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly"
#onchange="(e) => RoleChanged(e)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</select>
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
Upon debugging the RoleChanged method
It gets the option text as Value when the event is triggered.
Also the client validation is not firing
Refactor you code to use form components :
<div class="form-group row">
<div class="form-group col-md-6">
<label>Role</label>
<InputSelect class="form-control form-control form-control-sm"
placeholder="Role"
disabled="#IsReadOnly" Value="Model.Role" ValueChanged="RoleChanged" ValueExpression="#(() => Model.Role)">
<option value="">Select Role...</option>
<option value="Member">Member</option>
<option value="Admin">Admin</option>
<option value="Pioneer">Pioneer</option>
<option value="Retailer">Retailer</option>
</InputSelect >
<ValidationMessage For="#(() => Model.Role)" class="row" />
</div>
// an async method must return Task or ValueTask
private async Task RoleChanged(string value)
{
// your logic
}
I have this code with vue.js. I simplified the code for the question.
The problem is WHEN I CHANGE THE PROVINCE, AUTOMATICALLY MY SECOND SELECT
"selectProCongeFam" CHANGE TOO. I don't know why exactly.
Here is the code :
const deduction = {!! json_encode($deduction->toArray()) !!};
const provinces = {!! json_encode($provinces) !!};
new Vue({
el: '#app',
data: function () {
return {
provinces: provinces,
province: deduction['province']
}
}
})
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 mb-4">
<div class="form-group">
<label>Province
<select class="form-control"
name="province" id="province" v-model="province">
<option v-for="(name,value) in provinces" :value="value">
#{{name}}
</option>
</select>
</label>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 mb-4">
<div class="form-group">
<label for="selectProCongeFam">#lang('form.extFamily')
<select id="selectProCongeFam" name="proCongeFam"
class="form-control">
<option value="0"
:selected="deduction['proCongeFam'] == 0">#lang('form.no')</option>
<option value="1" :selected="deduction['proCongeFam'] == 1">#lang('form.yes')</option>
<option value="2" :selected="deduction['proCongeFam'] == 2">#lang('form.yesbutILD')</option>
<option value="3" :selected="deduction['proCongeFam'] == 3">#lang('form.AMConly')</option>
</select>
</label>
</div>
</div>
I want to use the form I made in 'create' component in 'edit' component.
There are some properties in data object that i need to populate in edit-component that were empty in create-component, also I want to replace create() method with edit(), method which uses axios to communicate with API.
I am clueless how to proceed with this problem, also I thought this might be a pretty common question to ask but I didn't find any satisfying answer. Is there no way i can replace existing methods in child component? Should I make different component for html form and for relevant methods?
create-component
<template>
<div id="dashboard-form">
<button class="button modal-button"
data-target="#myModal"
#click="modalToggle">
Launch Form
</button>
<div class="modal" id="myModal"
:class="{'is-active': modalStatus}">
<div class="modal-backgound"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Fill a new entry</p>
<button class="delete"
aria-label="close"
#click="modalToggle">
</button>
</header>
<section class="modal-card-body">
<form action="post">
<div class="modal-form" v-if="step === 1">
<div class="field">
<label class="label">Parent's Name</label>
<div class="control">
<input type="text" class="input"
placeholder="Enter parent name here"
v-model="parentName"
v-validate="'required'"
name="parentName"
:class="{'is-danger': errors.has('parentName'),
'is-success': parentName!=='' && !errors.has('parentName')}">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('parentName')">
{{ errors.first('parentName')}}
</p>
</div>
<div class="field">
<label for="parentContact" class="label">
Parent's Contact Number
</label>
<div class="control">
<input type="tel" class="input"
placeholder="Enter 10 digit mobile number"
v-model="parentContact"
v-validate="{required: true, regex: /^[5-9]\d{9}$/}"
:class="{'is-danger': errors.has('parentContact'),
'is-success': parentContact!=='' && !errors.has('parentContact')}"
name="parentContact">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('parentContact')">
{{ errors.first('parentContact' )}}
</p>
</div>
<div class="field">
<label class="label">Student's Name</label>
<div class="control">
<input type="text" class="input is-success"
placeholder="enter student name here"
v-model="studentName"
name="studentName">
</div>
</div>
<div class="field">
<label class="label">Tutor's Name</label>
<div class="control">
<input type="text" class="input"
placeholder="Enter tutor's name here"
v-model="tutorName"
v-validate="'required'"
name="tutorName"
:class="{'is-danger': errors.has('tutorName'),
'is-success': tutorName!=='' && !errors.has('tutorName')}">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('tutorName')">
{{ errors.first('tutorName')}}
</p>
</div>
<div class="field">
<label for="tutorContact" class="label">
Tutor's Contact Number
</label>
<div class="control">
<input type="tel" class="input"
placeholder="Enter 10 digit mobile number"
v-model="tutorContact"
v-validate="{required: true, regex: /^[5-9]\d{9}$/}"
:class="{'is-danger': errors.has('tutorContact'),
'is-success': tutorContact!=='' && !errors.has('tutorContact')}"
name="tutorContact">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('tutorContact')">
{{ errors.first('tutorContact') }}
</p>
</div>
<div class="field">
<label for="startingDate" class="label">
Tuition Started on
</label>
<div class="control">
<input type="date" class="input"
v-model="startingDate"
v-validate="'required'"
:class="{'is-danger': errors.has('startingDate'),
'is-success': startingDate!='' && !errors.has('startingDate')}"
name="startingDate">
</div>
<p class="help has-text-left"
v-show="errors.has('startingDate')">
{{ errors.first('startingDate') }}
</p>
</div>
<div class="field">
<label for="sessionDuration" class="label">
How long each session lasts(in hours)
</label>
<div class="control">
<input type="text" class="input"
v-model="sessionDuration"
v-validate="'required'"
:class="{'is-danger': errors.has('sessionDuration'),
'is-success': !errors.has('sessionDuration')}"
name="sessionDuration">
</div>
<p class="help has-text-left" v-show="errors.has('sessionDuration')">
{{ errors.first('sessionDuration') }}
</p>
</div>
<div class="field">
<label for="sessionsMonth" class="label">
Number of sessions in a month.
</label>
<div class="control">
<input type="number" class="input"
v-model="sessionsMonth"
v-validate="'required'"
:class="{'is-danger': errors.has('sessionsMonth'),
'is-success': !errors.has('sessionsMonth')}"
name="sessionsMonth">
</div>
<p class="help has-text-left"
v-show="errors.has('sessionsMonth')">
{{ errors.first('sessionsMonth') }}
</p>
</div>
<div class="field">
<label for="fees" class="label">
Fees Charged from Parents
</label>
<div class="control">
<input type="number" class="input"
v-model="fees" v-validate="'required|min_value:500'"
:class="{'is-danger': errors.has('fees'),
'is-success': !errors.has('fees')}"
name="fees">
</div>
<p class="help has-text-left"
v-show="errors.has('fees')">
{{ errors.first('fees') }}
</p>
</div>
<div class="field">
<label for="commission" class="label">
How much commission is being charged?
</label>
<div class="control">
<input type="number" class="input"
v-model="commission"
v-validate="'required|min_value:0|max_value:50'"
:class="{'is-danger': errors.has('commission'),
'is-success': !errors.has('commission')}"
name="commission">
</div>
<p class="help has-text-left"
v-show="errors.has('commission')">
{{ errors.first('commission') }}
</p>
</div>
<div class="field">
<label for="coordinator" class="label">Coordinator</label>
<div class="control">
<div class="select"
:class="{'is-success': coordinator!=='',
'is-danger': coordinator==='' && coordinatorIsFocused}">
<select name="coordinator" v-model="coordinator"
#focus.once="coordinatorToggle">
<option selected disabled>Name of Coordinator</option>
<option value="seth">Himanshu(Seth)</option>
<option value="hk">Himanshu(HK)</option>
<option value="anuj">Anuj</option>
</select>
</div>
</div>
<p class="help has-text-left"
v-show="coordinator==='' && coordinatorIsFocused">
Selecting one of the option is required
</p>
</div>
<div class="field">
<label for="paymentMode" class="label"></label>
<div class="control">
<div class="select"
:class="{'is-success': paymentMode!=='',
'is-danger': paymentMode==='' && paymentModeIsFocused}">
<select name="paymentMode" v-model="paymentMode"
#focus.once="paymentModeToggle">
<option disabled selected>Mode of Payment</option>
<option value="cash">Cash</option>
<option value="paytm">PayTM</option>
<option value="bank seth">Bank Seth</option>
<option value="bank anuj">Bank Anuj</option>
<option value="kotak">Kotak</option>
</select>
</div>
</div>
<p class="help has-text-left"
v-show="paymentMode==='' && paymentModeIsFocused">
Selecting one of the option is required
</p>
</div>
</div>
<div class="modal-form" v-if="step === 2">
<div class="field">
<p class="has-text-left">In which standard student is studing?</p>
<div class="control">
<div class="select"
:class="{'is-success': standard!='',
'is-danger': standard==='' && standardIsFocused}">
<select v-model="standard"
#focus.once="standardToggle()"
#change="emptySubjects()">
<option value="pre-primary">Pre-Primary</option>
<option value="1">Standard 1</option>
<option value="2">Standard 2</option>
<option value="3">Standard 3</option>
<option value="4">Standard 4</option>
<option value="5">Standard 5</option>
<option value="6">Standard 6</option>
<option value="7">Standard 7</option>
<option value="8">Standard 8</option>
<option value="9">Standard 9</option>
<option value="10">Standard 10</option>
<option value="11-sci">Standard 11 - Science</option>
<option value="11-com">Standard 11 - Commerce</option>
<option value="11-art">Standard 11 - Arts</option>
<option value="12-sci">Standard 12 - Science</option>
<option value="12-com">Standard 12 - Commerce</option>
<option value="12-art">Standard 12 - Arts</option>
</select>
</div>
</div>
<p class="help has-text-left is-danger"
v-show="standard==='' && standardIsFocused">
Selecting one of the option is required.
</p>
</div>
<p>Which subject(s) does the student need help with?</p>
<div class="field">
<div class="control" v-for="(subject,index) in subjectListFinal" :key="index">
<label class="checkbox">
<input type="checkbox" :value="subject" v-model="subjects" v-validate="'required'" name="subjects">
{{subject}}
</label>
</div>
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('subjects')">
Select atleast one subject.
</p>
</div>
</form>
</section>
<footer class="modal-card-foot">
<div class="field is-grouped">
<button class="button is-link"
#click="prev" v-show="step===2">
Previous
</button>
<button class="button is-link"
#click="next" v-show="step===1">
Next
</button>
<button class="button is-link"
#click="validateBeforeSubmit" v-show="step===2">
Submit
</button>
</div>
</footer>
</div>
<label class="modal-close is-large" #click="modalToggle"></label>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'DashboardForm',
data () {
return {
modalStatus: false,
standardIsFocused: false,
coordinatorIsFocused: false,
paymentModeIsFocused: false,
step: 1,
parentName: '',
parentContact: '',
studentName: '',
tutorName: '',
tutorContact: '',
startingDate: '',
sessionDuration: '1',
sessionsMonth: 24,
fees: null,
commission: null,
coordinator: '',
paymentMode: '',
standard: '',
subjects: [],
prePrimarySubjects: [
'Abacus',
'Handwriting Basics',
'English Phonetics',
'English',
'KG Academics'
],
standard1To5Subjects: [
'All Subjects',
'Vedic Maths',
'Mathematics',
'Science',
'English',
'Hindi',
'Environmental Studies',
'Mathematics-Science (Combo)',
'Handwriting (English/Hindi)'
],
standard6To10Subjects:[
'Mathematics',
'Science',
'Computer Science',
'English',
'Hindi',
'Social Science',
'Sanskrit',
'Environmental Studies',
'French',
'German',
'Spanish',
'Mathematics-Science (Combo)',
'Olympiad Maths/Science'
],
standard11To12ArtsSubjects: [
'Geography',
'History',
'Political Science',
'Humanities',
'English',
'Psychology',
'Computer Science/Information Practices'
],
standard11To12CommerceSubjects: [
'Accounts',
'Business Studies',
'Economics',
'Mathematics',
'English',
'Psychology',
'Computer Science/Information Practices'
],
standard11To12ScienceSubjects: [
'Mathematics',
'Physics',
'Chemistry',
'English',
'PCB Combo',
'PCM Combo',
'Computer Science/Information Practices',
'Competitive Exam Preparation'
]
}
},
methods: {
modalToggle() {
this.modalStatus = !this.modalStatus
},
prev() {
this.step--
},
next() {
this.coordinatorToggle()
this.paymentModeToggle()
this.$validator.validate('parentName', this.parentName)
this.$validator.validate('parentContact', this.parentContact)
this.$validator.validate('tutorName', this.tutorName)
this.$validator.validate('tutorContact', this.tutorContact)
this.$validator.validate('startingDate', this.startingDate)
this.$validator.validate('sessionDuration', this.sessionDuration)
this.$validator.validate('sessionsMonth', this.sessionsMonth)
this.$validator.validate('fees', this.fees)
this.$validator.validate('commission', this.commission).then(() => {
if(!this.errors.any() && this.coordinator!=='' && this.paymentMode!==''){
this.step++
}
})
},
validateBeforeSubmit() {
this.$validator.validateAll().then(() => {
if(!this.errors.any()) {
this.addQuery()
this.modalToggle()
}
})
},
standardToggle() {
this.standardIsFocused = true
},
coordinatorToggle() {
this.coordinatorIsFocused = true
},
paymentModeToggle() {
this.paymentModeIsFocused = true
},
emptySubjects() {
this.subjects = []
},
addQuery() {
axios({
method: 'post',
url: 'http://127.0.0.1:8000/api/dashboard/',
data: {
parent_name: this.parentName,
parent_contact: this.parentContact,
student_name: this.studentName,
tutor_name: this.tutorName,
tutor_contact: this.tutorContact,
standard: this.standard,
subject: this.subjects,
starting_date: this.startingDate,
session_month: this.sessionsMonth,
session_duration: this.sessionDuration,
fees: this.fees,
commission: this.commission,
coordinator: this.coordinator,
mode_payment: this.paymentMode
}
}).then(() =>{
this.parentName = '',
this.subjects = [],
this.parentContact = '',
this.studentName = '',
this.tutorName = '',
this.tutorContact = '',
this.standard = '',
this.startingDate = '',
this.sessionsMonth = 24,
this.sessionDuration = '1',
this.fees = null,
this.commission = null,
this.coordinator = '',
this.paymentMode = '',
this.step = 1
})
.catch((error) => {
console.log(error);
});
}
},
computed: {
subjectListFinal: function() {
if (this.standard==='pre-primary'){
return this.prePrimarySubjects
}
else if (this.standard==='1'||this.standard==='2'||this.standard==='3'||this.standard==='4'||this.standard==='5') {
return this.standard1To5Subjects
}
else if (this.standard==='6'||this.standard==='7'||this.standard==='8'||this.standard==='9'||this.standard==='10') {
return this.standard6To10Subjects
}
else if (this.standard==='11-sci'||this.standard==='12-sci') {
return this.standard11To12ScienceSubjects
}
else if (this.standard==='11-com'||this.standard==='12-com') {
return this.standard11To12CommerceSubjects
}
else if (this.standard==='11-art'||this.standard==='12-art') {
return this.standard11To12ArtsSubjects
}
}
}
}
</script>