Vue JS 3 Tutorial for Beginners #7

Vue JS 3 Tutorial for Beginners #7 - Forms & Inputs

Рет қаралды 182,740

Күн бұрын

Hey gang, in this Vue 3 tutorial we'll take a closer look at forms & input fields in Vue.js. We'll look at v-model for 2-way data binding, keyboard events & how to react to form submissions.
🐱‍💻 🐱‍💻 BUY THE FULL 20-hr COURSE ON UDEMY:
www.thenetninja.co.uk/udemy/v...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Vue-3-F...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Пікірлер: 185

@loreleieleanor8124 10 ай бұрын

I (and I can't stress this enough) ADORE the little music you play when you're downloading things. It makes me smile every time.

@kierrboy8613 2 жыл бұрын

CSS Styles 32:34 pill css .pill { display: inline-block; margin: 20px 10px 0 0; padding: 6px 12px; background: #eee; border-radius: 20px; font-size: 12px; letter-spacing: 1px; font-weight: bold; color: #777; cursor: pointer; } 37:02 submit css button { background: #0b6dff; border: 0; padding: 10px 20px; margin-top: 20px; color: white; border-radius: 20px; } .submit { text-align: center; } 43:47 error css .error { color: #ff0062; margin-top: 10px; font-size: 0.8em; font-weight: bold; }

@sahilgagan2242 Жыл бұрын

@abdoabdalla1745 10 ай бұрын

Gigachad

@pantelisvasileiadis2858 3 ай бұрын

thanks dude!

@Zale370 3 жыл бұрын

Your tutorials are better and more clear compared to any other courses for beginners, great work!

@Tsiode 3 жыл бұрын

I usually don't comment, but I needed this for my work and this is by far one of the most understandable tutorials out there.

@NetNinja 3 жыл бұрын

Thank you! 😃

@pagevpetty 2 жыл бұрын

2:10 Signup form 5:25 2-way data binding 13:47 Checkboxes 33:09 Delete 35:51 Submit form 40:30 Validate

@antoniofuller2331 2 жыл бұрын

Hmm

@mk9834 3 жыл бұрын

I cannot imagine how much effort is required to produce these impeccable and extremely comprehensive tutorials, I am baffled by your dedication! Appreciate it very very much!

@antoniofuller2331 2 жыл бұрын

I guess you're still baffled

@maskman4821 3 жыл бұрын

This is the best vuejs form tutorial, everything covered except radio, Shaun walks us through all kinds of input type and the use of each of them with step by step instructions and explanations, so there is no need to use those fancy form plugins / modules, because these wrapper component increases the complexity to the codes, anyhow this is an awesome tutorial, it serves an excellent refresh and for beginners to understand the power of vuejs that makes life so much easier !!!

@NetNinja 3 жыл бұрын

Hey Stephen, thanks so much :)

@johnfawcett3503 3 жыл бұрын

Great videos, thank you. I particularly like the explanation of v-model it made it so much easier to understand

@_a-g_4407 2 жыл бұрын

love this video so much. clear and easy to comprehend.checking the video while coding, felt good about it.

@olamideabass5587 8 ай бұрын

i am very new to vue js, watched a couple of your videos and I was able to complete a vue task at work in no time. God bless you shaun.

@sathvikmalgikar2842 2 жыл бұрын

this series is just really really simple to understand. GreatJob!

@moosesaid 2 жыл бұрын

You're skilled. Thank you for such clear tutorials.

@bakercsgo5822 Жыл бұрын

i am so thankfulf or this vue course! after a few months of casually learning react and working through multiple projects and tutorials i decided to try out Vue and its like night and day how much more it clicks with me. P.S your a great teacher and ive been loving the challenges in this series!

@pt_trainer9244 Жыл бұрын

He is a great teacher for sure, coming from react as well and I understand pretty much everything so far having the react background.

@berkay8467 3 жыл бұрын

We're waiting for MEVN Stack, thank you for the video!

@zeeshanhayder3559 3 жыл бұрын

Trust me you have cleared my doubt I am stopping video at 16 and appreciating you here!

@Yazuroshi 2 жыл бұрын

5:25 - 2-way data binding 10:37 - select boxes (also checkboxes from 14:00) 20:37 - keyboard events 32:00 - deleting skills

@afolabijosh2431 2 жыл бұрын

Ninja ninja my guy my guy........I dey greet you from Nigeria. I just want to let you know that I love you and most especially the effort you put in to this video in order to make it more simple especially for beginners.....much love bruhv

@dheerajsingh568 2 жыл бұрын

This is The Hardest Framework I was thinking but its easier than other frameworks. I wasted my time overs years to learn React and Angular but now I am on the right way with help of Ninja bro....

@sensapipe Жыл бұрын

This actually helped me a lot in my job, THANKS

@OsamaMaher 2 жыл бұрын

Great effort from a great ninja, wish you all the best

@hunl.919 3 жыл бұрын

I'm so glad I found this hidden gem. Your clear explanations help make my learning so much more productive.

@Nasir_Haidari 3 жыл бұрын

Great teacher and th best way to learn!!!

@NetNinja 3 жыл бұрын

Thank you! 😃

@TomasMisura 2 жыл бұрын

regardless I am javascript/vue beginner I understood a lot. I consider this tutorial as one the best I have ever seen. I have to admit that sometimes I was a bit lost but it was my fault not yours.

@push2me936 Жыл бұрын

Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!

@andrewsharpe4764 2 жыл бұрын

I really love these videos. They breakout every conceivable concept a beginner or intermediate programmer might need, but I have to quibble with your solution at around 30:00 for stopping the comma being added to the skills array. If you just used a keydown event then the value passed would not include that key, and your user wouldn’t have to weirdly use alt with their commas. This would leave another issue whereby the comma could be written into the input box, but that’s where the keyup event would come in to clear it. I’m guessing the reason you did it this way was to recap on event modifiers, in which case, fine, but maybe do a submit alternative using alt s for this?

@Ezechielpitau 2 жыл бұрын

yeah, totally agree. Just strip the comma. Or better yet, use "enter" instead of the comma. Feels way more natural anyway... But then again: Anyone who's ever tried to record a video of even 5 minutes without blabbering nonsense at some point knows that this stuff is quite hard to do well. So, apart from some of these minor points, these vids are still excellent

@darkmojojojo 2 жыл бұрын

I just used the the String.replace() method to remove the comma. INB4 String manipulation is inefficient, probably.

@vanessavun Жыл бұрын

I use space as the key event to add skill, and then push the trimmed string into the array: this.skills.push(this.tempSkill.trim())

@codecret1 9 ай бұрын

or this.tempSkill = this.tempSkill.replace(/,/g, ' ');

@deejayerick 3 жыл бұрын

Hey Shaun thanks a lot!... Are you going to cover the deploy process?

@MKD7036611 Жыл бұрын

I am really loving your tuts, it was the best thing I could choose to get me into working with Vue, this was a frame work I have been wanting to learn for some time. So clear and really broken down to my ding dong level. I just want to know by you though, after doing the removeskill feature I took a different approach. I built a function like this removeSkill() {this.skills.pop()} and then the @click on the span it seems to get the job done, but I am not sure if there are any issues with this. I am not very confident in my skill set as a developer NVM I see the fault in my stars

@filco8494 Жыл бұрын

1:10 thx for the music. It really helped me to get through the waiting time

@KolyaKovt 4 ай бұрын

Thanks for the tutorial! It was really helpful.

@NetNinja 4 ай бұрын

Glad to hear that! :) thanks for watching Kolya

@evandromatt 3 жыл бұрын

Sorry for my english. I did the challenge like this: removeSkill(e){ this.skills.splice(this.skills.indexOf(e.target.textContent), 1) } And then, seeing your solution I changed to this: removeSkill(skill){ this.skills.splice(this.skills.indexOf(skill), 1) } It still works, but because the click is in the tag and not in the tag, I need to click right in the text to delete, in the first solution I could click in the .pill element and still deletes it.

@danielmande1 2 жыл бұрын

Great tenurial Thanks!

@devserendipity3063 3 жыл бұрын

Amazing content!!!

@ebraheemlabib5133 3 жыл бұрын

You're legend man 🙏🙏

@jumbo999614 3 жыл бұрын

24:43 Instead of comma, why not 'Enter' key? If you use comma, you have to remind viewer to use comma as a way to store value.

@hydraalenio3451 3 жыл бұрын

how can i do that? .enter or .13 nothing happen

@jumbo999614 3 жыл бұрын

@@hydraalenio3451

@chelinchan24 2 жыл бұрын

@@hydraalenio3451 You had to also remove the "e.key === ',' && " inside function addSkill(e)

@oorhood 3 жыл бұрын

Dude you're awesome!!

@vishwasuryachowdary2028 3 жыл бұрын

Heyy shaun, we love ur teaching.expecting full react course in udemy.we love to pay for your effort

@shellykapoor7331 3 жыл бұрын

Yes

@mullla1ya 3 жыл бұрын

20:44 adding skills. "html, css, blah blah... hopefully vuejs by now hehe"

@kirankothandan5529 Жыл бұрын

Mr Shawn you are an incredibly amazing teacher 🤩

@NetNinja Жыл бұрын

Thank you Kiran!

@abhijitmhatre5411 2 жыл бұрын

Good explanation sir ❤️

@Pizzaguy2 2 жыл бұрын

so far im at #7 video , and ur the best teacher

@shahabjoon201 2 жыл бұрын

Hi, thanks for sharing. The question is, how to validate inputs in an array, for instance, whenever new inputs are generated into a form, how to validate these nested inputs? Thanks in advance.

@push2me936 Жыл бұрын

Ok, let give this a wow!

@patapon9446 3 жыл бұрын

I just want to say something about the function addSkill I'm not sure if I'm missing something here but on the if statement Won't we will still meet the condition here even if we just enter a comma no other letters etc just a comma on the input? The tempSkill also gets a value comma right? the moment when we pressed the comma key it made the boolean evaluates to true. This happened to me so I just used enter key instead.

@bajtucha 2 жыл бұрын

For the sake of performance I encourage you to perform deleting of items (the challenge) like this: deleteSkill (skill){ this.skills.splice(skill, 1) } That way you don't iterate through array again and use 'index' value that already has been found during v-for loop.

@aleksandarnikolic8293 9 ай бұрын

deleteItem(e) { this.skills.pop(e) }

@faiedweb 3 жыл бұрын

Great explanation Can we expect electron.js tutorial?

@learnsimple4592 3 жыл бұрын

Thanks Shaun. I just wanted to know whether the rumor about a next.js course from you was true. If it is when is it coming ?

@mullla1ya 3 жыл бұрын

Would be very nice if you'd include this to the lesson: how do I destroy the form after it was submitted? And show pop-up saying something like "check your email for verification". But I guess I'll see that in some next lessons.

@tomvanbrabant3053 3 жыл бұрын

Why are you not using the for attribute on labels? Thanks!

@wrathverse9766 2 жыл бұрын

I very rarely react to videos, I have liked , subscribed , commented ,and I am even gonna suggest to my friends who are interested in coding

@orlandoglez872 Жыл бұрын

excellent explanation, tnks

@NetNinja Жыл бұрын

Hope it was helpful Orlando!

@rwobben489 Жыл бұрын

Where can I find the code for the lessons so I can copy the css. The link points to a totally other course with firebase

@francescagia2533 Ай бұрын

thank you for this detailed Vue tutorial, that is both basic but covers the main features :). I have 2 comments: 1-when I tried to name the components the way you did, the system crashed since it wanted the component name made up by at least 2 words. 2- I currently work on a Mac and when using the @keyup.alt directive in the web-form, I cannot get the desired effect since when I press the ALT (aka OPTION in mac keyboard) + comma the result is this ≤, so the event does not get fired :(. How to solve this? is it a keyboard configuration?

@leonardohirsch9086 Жыл бұрын

great tutorial, even more for a spanish speaker! Thanks

@NetNinja Жыл бұрын

Thanks Leonardo, glad you liked it!

@elliotanimations1067 Жыл бұрын

31:55 - How is the user meant to know holding 'alt' will get rid of the comma? I'm not sure if I'm missing something here

@mattgic42 3 жыл бұрын

Since you're getting into user input in this video, can you expand on this and cover stuff like data sanitizing, CSRF and XSS protection especially when/if someone were to hook this up to a database? Or is that stuff already handled by Vue?

@semantixpt Жыл бұрын

sanitizing data is made on the server side, Vue is client-side, it may send data to the server, and that's where it should be analyzed, sanitized and eventually processed

@matthiaskolley1048 3 жыл бұрын

One question: Would it be better to use `this.skills.push(this.tempSkill.trim().replace(",", "");` in terms of usability?

@vzylan4479 2 жыл бұрын

Using that method, it would not be possible to check if the variable in the array already exists and it would be duplicated. You have to put ' this.tempSkill = this.tempSkill.trim().replace(",", ""); ' just below the method addSkill() for it to work

@cryptohunter7394 2 жыл бұрын

For me, I have used split(), join to filter out all the commas (which could be typed at the beggining of a str), and then use new Set() to remove all the duplicates : methods: { handleInput(e){ if(e.key === ',' && this.tempSkills !== ","){ this.skills.push(this.tempSkills.split(',').join('')) this.tempSkills = '' this.skills = [... new Set(this.skills)] } } }

@MrSonicastra Жыл бұрын

In the section of deleting a skill, can u use this.skills.splice(skillIndex, 1); or do u have to use filter()? Ofc in the v-for i use v-for="skill, skillIndex in skills" :key="skillIndex"

@MarcdeRuyter 2 жыл бұрын

What is the syntax to access the form data with ?

@kelvin513 2 жыл бұрын

I am on a MacBook, the .alt key modifier doesn't work as stated in the video. But it works with the .ctrl modifier

@chimepalden7073 2 жыл бұрын

Could you please share information or any link to model driven form in vue js ?

@JoseLuisRomeroFiruzzZ 2 жыл бұрын

great videos, but I have a doubt here, about why the button added in a Form triggers the submit action? type='submit' is not specified, it is just an ordinary one

@dandelion0331 2 жыл бұрын

you are meant to be a good teacher

@nyarehd 3 жыл бұрын

In the challenge, I used event.target.remove(). Is this acceptable?

@shwezin1565 2 жыл бұрын

I get a bit comfused how && operation works in line 45 of addSkill() .When i put this.temskill before the operator and ' , ' after operator, it inject each key what i press and push into skills. So what is wrong about what i know? && operator returns true if only both situations are true. That means e.key should equal to both this.tempskill and ' , ' . In my problem it returns true even if e.key equals to one of them. Can someone give me the reason,please? I am curious about this.

@ahoymatey1234 Жыл бұрын

Silly question here but I wasn't able to get the keyup.alt to work on a mac keyboard. Does anyone know how to do that? From what I can tell I should hold option+alt for an alt event to be triggered but it doesn't work.

@johnsonolurotimi5108 Жыл бұрын

hello sir , trust you're doing good....i have a problem..... the v-for and binding key attributes prevents div from showing......without any error showing....pls how can i fix this??

@kajetankasprzyk3019 Жыл бұрын

zajebisty tutorial

@georgi_verstapen33 11 ай бұрын

for deleting I kept the div like it was and just added @click: {{ skill }} and I created my method like this(more java styled): deleteSkill (skill) { if (this.skills.includes(skill)) { const pos = this.skills.indexOf(skill); this.skills.splice(pos, 1) } } maybe getting the pos first and then checking if its !=-1 or >=0 will be even faster. By my bare knowledge my approach is faster and takes less memory, but I could be dead wrong. Would be thankful for any feedback! PS. Your videos are amazing and very very very helpful!

@mix-ousoy3485 5 ай бұрын

to remove the ','; we could use : {{ skill.replace(/,/g, '') }}

@OhLookZombies 4 ай бұрын

One thing I've been wondering, how well could you make a form using vue router? If it all loads at once, does that mean a form instance across all views would be the same object that you could pass back? So you could separate a form into multiple views and have it all return at once. Plus you wouldn't have to reload between pages or pass app-ids around between them. Would this work?

@anmarm.9487 2 жыл бұрын

Would you do tutorial about Alpine JS.. Thx

@betofc89 Жыл бұрын

32:00 - Deleting Skills 35:51 - Submitting Forms 40:38 - Form validation

@jonl316 Жыл бұрын

Thank you, thank you, thank you!!

@NetNinja Жыл бұрын

You're welcome! :)

@dashabulatova7628 3 жыл бұрын

why can keyup.alt doesnt work? its just continue word with comma and doesnt add it to array

@Carl-yu6uw 3 жыл бұрын

Is there growing demand within the UK jobs market for Vue skills, relative to React or Angular ?

@NetNinja 3 жыл бұрын

React & Angular are still in demand more, but the last year has seen a big increase in Vue jobs in the UK and it's still growing.

@PetervandenHeuvel81 3 жыл бұрын

@@NetNinja I like the syntax of Vue.js a lot better than React or Angular. Would you advise against learning Vue though?

@kensleylewis 2 жыл бұрын

Question - will this learning guide allow me to host this project on Firebase for free?

@marcscherzer Жыл бұрын

45:26 Why is the skills variable not an array? Why is it proxy and is like an object?

@betofc89 Жыл бұрын

I would like to propose a CSS. I loved the result! form { background: linear-gradient(45deg, rgb(225, 225, 225), rgb(215, 215, 215)); width: 450px; text-align: left; margin: 0 auto; padding: 3rem; display: inline-block; border-radius: 16px; } label { font-size: large; text-transform: uppercase; color: #999; font-weight: bold; letter-spacing: 2px; display: inline-block; margin-bottom: 0.3rem; } input, select { background-color: rgb(235, 235, 235); display: block; box-sizing: border-box; width: 100%; margin-bottom: 1.2rem; border: none; padding: 1.5rem 6px; font-size: large; color: #888; border-radius: 16px; box-shadow: 0 4px 3px 0px rgb(182, 182, 182); }

@user-nj1jl2lj8r 2 жыл бұрын

how to fetch data put, post to show in table. if you you have a video plz shard link to me plz

@azamhusain1311 10 ай бұрын

watched other tutorials and the explanations are not as good. as a beginner, your tuts are the best! god bless

@NetNinja 10 ай бұрын

I appreciate that! :) thank you

@GurovDmitriy 3 жыл бұрын

why do such a heavy operation on an array when we know the index - delSkill(index) { this.skills.splice(index, 1); },

@samtakahashi5602 3 жыл бұрын

About the challenge at 32:00 i kinda came up with a simple solution(before seeing the answer) to remove a skill when clicked: deleteSkill(){ this.skills.pop(this.tempSkills) } Then I added @click="deleteSkill" to the div(with the class="pill") and it seems to work the same as Shauns code? Am I missing something important here? Thank you very much for these awesome tuts!

@00el04 3 жыл бұрын

pop will not create a new array for you and will always delete the last element in the array whereas filter will create a new array so it better for development if something goes wrong as you didn't change the old array :)

@shukshiraj9832 3 жыл бұрын

15:05 how did you manage to get colour of checkbox grey, like it's in input that's why it automatically grey but mine it's not working that way. Any idea how do I get my colour grey?

@negarkh4410 3 жыл бұрын

add background: white; to its style

@TruthSeekerClub 2 жыл бұрын

I am wondering if user have to press alt to add a skill ! can you please explain to me why used alt instead of modifying the skill itself Sensei? to me i would solve it this way: since string is also an array of characters i can remove the last character which is gonna be always the comma.

@mariecerah4453 2 жыл бұрын

am here stuck actually after adding alt it stopped firing my input. I am looking for another way to do this.

@andrewboddy2791 2 жыл бұрын

Why use the Options API when Composition API is VUE 3 ? Saying that we can use both only adds to confusion , and will take years of messing about if there is not a conscious move to use the new structures. (Does this video show the Composition API later ? )

@cap-advaith Жыл бұрын

31:00 you could use str.replace(" ,"," ") to remove ' , '

@successpeter7185 2 жыл бұрын

and then theres is issue of white space, someone might enter a word, then pad it with with space either in the beginning or end and still repeat the same word

@sachinjadhav4474 6 ай бұрын

30:05 .alt doesn't work, the function/method doesnt get executed at all when I add that.

@husarmunchie2975 Жыл бұрын

Awesome tutorial so far. On deleting the skill when click I found another mthod to do so by using indexOf(): clearSkill(skill) { // remove items in array using splice this.skills.splice(this.skills.indexOf(skill)); Someone posted using filter is bad in vue3 because it convert Proxy{[items]} to [Proxy{item},Proxy{item}]. Can someone explain this?

@Marcaureleotto Жыл бұрын

I found using this.skills.splice(skill, 1) is also better, or at least shorter. Also I put the @click direct into the div, no need for span to isolate skill But I am curious to know if these methods are better, worse, or simply equal

@boxu4948 Жыл бұрын

how to close the serve running on the port 8080, or do I need to close it?

@boxu4948 Жыл бұрын

I find the answer: control + c

@_boza Жыл бұрын

Hi Shaun! I think you forgot to put "20:37 - keyboard events" chapter

@ridl27 3 жыл бұрын

ty.

@lorenzotrojan 2 жыл бұрын

the skills can be returned as a computed data object (well... you'll not need the keyboard event anymore!): computed: { skills () { if (this.stringSkills) { let skills = this.stringSkills.split(',') return skills.map((skill) => skill.trim()).filter((skill) => skill) } else { return [] } } }

@akashdomakunti7662 7 ай бұрын

You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in [eslint] C:\Users\admin\web-form\src\components\Signup.vue 1:1 error Component name "Signup" should always be multi-word vue/multi-word-component-names Hi Net Ninja I am getting this error, How to Resolve this issue? can you guide this?

@BraWayne 3 ай бұрын

My keyboard, for some reason, registers the key pressed as 'Comma' and not ',' - I'm not sure why.

@andythedishwasher1117 Жыл бұрын

lol every time I see you misspell something, a timer starts in my head and stops when you correct it for compulsive reasons of my own. You may be pleased to know that this timer hasn't ever gone up to more than a couple of minutes. Good job, bud.

@baroudentsiba8710 3 жыл бұрын

Hi guys just so you know, ```@keyup.alt="yourMethod"``` command works on Linux. For Windows users please use ```@keyup.prevent="yourMethod"```

@J0hn1ee 3 жыл бұрын

thx

@semantixpt Жыл бұрын

I know I'm asking for more than I paid for, but it would be most helpful if there were hints on which GitHub's lesson is the code (namely CSS) we need to follow along. Maybe in this comments section? Thanks for all you effort, just trying to hekp everybody out there. Found the form styles at lesson 42 (binary search...).

@peasantfaye5403 Жыл бұрын

Was looking for that too. Thank you!