0👍
You can add rules
attribute on v-text-field
tag to control fading validation.
<v-text-field :rules="codeRules" dense outlined label="Employee Code" v-model="emp_code"></v-text-field>
<v-text-field :rules="nameRules" dense outlined label="Employee Name" v-model="emp_name"></v-text-field>
export default {
data: () => ({
firstName: '',
codeRules: [
value => {
if (/^\d+(\.\d+)?$/.test(value)) return true
return 'Employee Code must be a number.'
},
],
nameRules: [
value => {
if (/^[A-Za-z]+$/.test(value)) return true
return 'Employee Name must be a letter.'
},
],
}),
}
- [Vuejs]-How to configure a vuejs app with an external file
- [Vuejs]-How can I register external component dynamically without any modification of parent(main) Project in vue3?
0👍
This is already answered by my friend from other country after i reached him.
This is how he do it.
Home.vue
<v-row dense>
<v-col cols="2">
<v-text-field dense outlined label="Employee Code" v-model="myObj.EmployeeCode"></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field dense outlined label="Employee Name" v-model="myObj.EmployeeName"></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field dense outlined label="Age" v-model="myObj.Age"></v-text-field>
</v-col>
<v-col cols="2">
<v-btn @click="Insert()">INSERT</v-btn>
</v-col>
</v-row>
mydata is…
data(){
return {
myObj:{
EmployeeCode: '',
EmployeeName: '',
Age: '',
EmployeeDeletedAt: '',
}
Then, my method is…
methods:{
Insert(){
axios.post(`api/employees`,this.myObj)
.then(res => {
if(res.data instanceof Array){
console.log(res.data)
alert('Insert Successful!')
}else{
alert(res.data)
}
}).catch(({response}) => {
this.$router.push('/error/' + response.status)
})
}
}
Controller.php
public function store(Request $req)
{
try {
$employee_model = new EmployeeModel();
$employee_model->InsertEmployee($req);
return $employee_model->EmployeeList();
} catch(\Exception $e) {
$err_data = ['Parameters' => $req, 'Functions' => __FUNCTION__];
throw new CommonException($e, $err_data, 500);
}
}
Model.php
public function InsertEmployee($req){
$dao_employee = new DAO();
$existing = $dao_employee::ExistingEmployeeCode($req->input('EmployeeCode'));
if($existing){
return 'Existing Employee Code!';
}else if(trim($req->input('EmployeeCode')) == ''){
return 'Please input employee code!';
}else if(trim($req->input('EmployeeName')) == ''){
return 'Please input employee name!';
}else if(trim($req->input('Age')) == ''){
return 'Please input age!';
}else if(strlen(trim($req->input('EmployeeCode'))) != 5){
return 'Employee code must be 5 characters only';
}else if(!is_numeric(trim($req->input('Age')))){
return 'Age must be number only';
}else{
DB::transaction(function () use($req, $dao_employee){
$dao_employee::InsertEmployee($req);
});
}
}
DAO.php
public static function InsertEmployee($req){
Employee::insert(
[
'EmployeeCode' => $req->input('EmployeeCode'),
'EmployeeName' => $req->input('EmployeeName'),
'Age' => (int)$req->input('Age'),
'created_at' => date('Y-m-d H:i:s'),
'updated_at' => date('Y-m-d H:i:s'),
'deleted_at' => null,
'UpdatedBy' => '12345'
]
);
}
I hope this could help for future reference.
- [Vuejs]-Upload image file not working in Laravel vuejs
- [Vuejs]-Trying to connect to a redis client from nuxt 3 middleware but the connection is undefined
Source:stackexchange.com