- Vue app to add strings of text ('skills') to an existing list. With each entry there is a delete button. Input validation is used to prevent empty strings or strings of less than 5 charaters from being added to the list.
- Note: to open web links in a new window use: ctrl+click on link
- This tutorial project used Vue Components, Templating, Input Verification, Styling, Forms, Animation, Routing.
.
-
Vue Router v3 the official router for Vue.js
-
Vue Vee-Validate a template-based validation framework that validates inputs and displays errors.
-
Vue DevTools extension for Chrome was used for debugging.
- Run
npm run servethen navigate tohttp://localhost:8080/. The app will automatically reload if you change any of the source files.
-addSkill() and remove() functions from `Skills.vue
methods: {
addSkill() {
this.$validator.validateAll().then((result) => {
if(result) {
this.skills.push({skill: this.skill})
this.skill = '';
}
console.log('not valid');
})
},
remove(id) {
this.skills.splice(id,1);
}
}- Add and delete skills from the Skills list supplied.
- Status: Working.
- To-Do: Add mode data inputs and add clock functionality. Not a simple ncu -u upgrade.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com