I am beginner web developer. I make small crud. This is my first application :)
I have this code:
<template>
<CRow>
<CCol col="12">
<CCard no-header>
<CCardBody>
<h3>
Create Note
</h3>
<CAlert
:show.sync="dismissCountDown"
color="primary"
fade
>
({{ dismissCountDown }}) {{ message }}
</CAlert>
<CInput label="Title 123" type="text" id="title" placeholder="Title" v-model="note.title"
v-bind:class="{ 'text-danger invalid': hasError }"></CInput>
<CInput textarea="true" label="Content" id="content" :rows="9" placeholder="Content.."
v-model="note.content" v-bind:class="{ 'text-danger invalid': hasError }"></CInput>
<CInput label="Applies to date" type="date" id="applies_to_date" v-model="note.applies_to_date" v-bind:class="{ 'text-danger invalid': hasError }"></CInput>
<CSelect id="status_id"
label="Status"
:value.sync="note.status_id"
:plain="true"
:options="statuses"
v-bind:class="{ 'text-danger invalid': hasError }"
>
</CSelect>
<CInput label="Note type" type="text" id="note_type" v-model="note.note_type" v-bind:class="{ 'text-danger invalid': hasError }"></CInput>
<template>
<div id="app">
<ckeditor v-model="editorData" :config="editorConfig" v-bind:class="{ 'text-danger invalid': hasError }"></ckeditor>
</div>
</template>
<div class="text-center py-5">
<CButton color="success" @click="store()" class="mr-3">Zapisz</CButton>
<CButton color="primary" @click="goBack">Cofnij</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import axios from 'axios';
import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';
import Swal from "sweetalert2";
Vue.use(CKEditor);
export default {
name: 'EditUser',
props: {
caption: {
type: String,
default: 'User id'
},
},
data: () => {
return {
hasError: false,
note: {
title: '',
content: '',
applies_to_date: '',
status_id: null,
note_type: '',
},
statuses: [],
message: '',
dismissSecs: 7,
dismissCountDown: 0,
showDismissibleAlert: false,
editorData: '',
editorConfig: {
// The configuration of the editor.
filebrowserImageBrowseUrl: Vue.prototype.$apiAdress '/api/laravel-filemanager?token=' localStorage.getItem("api_token"),
filebrowserImageUploadUrl: Vue.prototype.$apiAdress '/api/laravel-filemanager/upload?type=Images&_token=&token=' localStorage.getItem("api_token"),
filebrowserBrowseUrl: Vue.prototype.$apiAdress '/api/laravel-filemanager?type=Files&token=' localStorage.getItem("api_token"),
filebrowserUploadUrl: Vue.prototype.$apiAdress '/api/laravel-filemanager/upload?type=Files&_token=&token=' localStorage.getItem("api_token"),
height: 500,
language: 'pl',
//extraPlugins: 'facebookvideo, youtube, html5video',
editorUrl: "facebookvideo.js",
extraPlugins: 'a11yhelp,about,basicstyles,bidi,blockquote,clipboard,colorbutton,colordialog,contextmenu,copyformatting,dialogadvtab,div,editorplaceholder,elementspath,enterkey,entities,exportpdf,filebrowser,find,flash,floatingspace,font,format,forms,horizontalrule,htmlwriter,iframe,image,indentblock,indentlist,justify,language,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastefromgdocs,pastefromlibreoffice,pastefromword,pastetext,preview,print,removeformat,resize,save,scayt,selectall,showblocks,showborders,smiley,sourcearea,specialchar,stylescombo,tab,table,tableselection,tabletools,templates,toolbar,undo,uploadimage, wysiwygarea,autoembed,image2,embedsemantic',
image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
image2_disableResizer: true,
}
}
},
methods: {
goBack() {
this.$router.go(-1)
// this.$router.replace({path: '/users'})
},
store() {
if (this.checkInputs()) return;
let self = this;
axios.post(this.$apiAdress '/api/notes?token=' localStorage.getItem("api_token"),
self.note
)
.then(function (response) {
self.note = {
title: '',
content: '',
applies_to_date: '',
status_id: null,
note_type: '',
};
self.message = 'Rekord dodany poprawnie';
self.showAlert();
}).catch(function (error) {
if (error.response.data.message == 'The given data was invalid.') {
// self.message = '';
// for (let key in error.response.data.errors) {
// if (error.response.data.errors.hasOwnProperty(key)) {
// self.message = error.response.data.errors[key][0] ' ';
// }
// }
// self.showAlert();
Swal.fire(
'Błąd',
'Proszę wypełnić wszystkie pola oznaczone gwiazdką!',
'error'
)
} else {
console.log(error);
self.$router.push({path: 'login'});
}
});
},
checkInputs() {
if (!this.note.title || !this.note.content) {
Swal.fire(
'Błąd',
'Proszę wypełnić wszystkie pola oznaczone gwiazdką!',
'error'
)
this.hasError = true;
return true
}
return false
},
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert() {
this.dismissCountDown = this.dismissSecs
},
},
mounted: function () {
let self = this;
axios.get(this.$apiAdress '/api/notes/create?token=' localStorage.getItem("api_token"))
.then(function (response) {
self.statuses = response.data;
}).catch(function (error) {
console.log(error);
self.$router.push({path: 'login'});
});
}
}
</script>
<style>
.invalid input, textarea, select, checkbox {
border-color: red;
}
</style>
At this point, it works in such a way that the change of the font color and the input border occurs automatically after clicking "save".
I would like this border to be added only to empty inputs.
How can I do this?
Please help me :)
CodePudding user response：
You have to add condition in binding class
<CInput label="Title 123" type="text" id="title" placeholder="Title" v-model="note.title"
v-bind:class="[note.title == '' ? 'text-danger invalid' : '']"></CInput>
CodePudding user response：
You need an error indicator for each input. Try putting and looking for your errors in an object.
Template
<CInput label="Title 123" type="text" id="title" placeholder="Title" v-model="note.title"
v-bind:class="{ 'text-danger invalid': errors['title']}"></CInput>
<CInput textarea="true" label="Content" id="content" :rows="9" placeholder="Content.."
v-model="note.content" v-bind:class="{ 'text-danger invalid': errors['content'] }"></CInput>
Data
data: () => {
return {
errors: {
title: false,
content: false,
},
note: {
title: '',
content: '',
applies_to_date: '',
status_id: null,
note_type: '',
},
Check Inputs Method
checkInputs() {
let errorCount = 0;
// check each input individually
if (!this.note.title){
this.errors['title'] = true;
errorCount ;
}
else {
this.errors['title'] = false;
}
if (!this.note.content){
this.errors['content'] = true;
errorCount ;
}
else {
this.errors['content'] = false;
}
// TODO need to check the rest
return errorCount;
}