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

[@loreleieleanor8124]

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.

[@Tsiode]

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]

Thank you! 😃

[@mk9834]

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]

I guess you're still baffled

[@pagevpetty]

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

[@antoniofuller2331]

Hmm

[@maskman4821]

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]

Hey Stephen, thanks so much :)

[@andrewsharpe4764]

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]

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]

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]

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

[@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.

[@bajtucha]

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]

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

[@evandromatt]

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.

[@kierrboy8613]

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]

nc

[@abdoabdalla1745]

Gigachad

[@pantelisvasileiadis2858]

thanks dude!

[@afolabijosh2431]

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

[@sathvikmalgikar2842]

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

[@filco8494]

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

[@TomasMisura]

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]

Ok, let give this a wow!

[@matthiaskolley1048]

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

[@vzylan4479]

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]

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)] } } }

[@KolyaKovt]

Thanks for the tutorial! It was really helpful.

[@NetNinja]

Glad to hear that! :) thanks for watching Kolya

[@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

[@moosesaid]

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

[@wrathverse9766]

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

[@_a-g_4407]

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

[@michrisoft]

At 30:00, that seems like a pretty bad way to handle this? For one, "alt" on Mac is "option" and option+, does place a character, so your site now doesn't work for anyone using a Mac. From a UX perspective, that's not something in a million years that I, as a user, would think to do. You can easily just chop off the comma in the javascript with this.tempSkill.slice(0, -1). And, that's something you would logically use the enter/return key to do anyway rather than a comma. Just seems like a really bad and hacky thing to include in a tutorial.

[@michrisoft]

A secondary comment, at 33:30, you don't need to wrap it in a span tag. You can place that on click on the div where the v-for is being done. The problem with the span tag, is it requires you to click specifically on the txt in the pill for it to work. If you have it on the div, then the entire pill will be a valid clicking location for deleting the item.

[@LovelyAndyy]

This needs to be higher up. Very very sloppy way of implementing it in the tutorial. This is how you should be removing the comma

[@jorgeMooveIn]

@@michrisoft You are right in both commentaries, although he says in the video that you need to use a span tag.

[@michrisoft]

@@jorgeMooveIn I don't remember what he said, but you absolutely don't need to. I did it the way I described and obviously it works perfectly.

[@push2me936]

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

[@azamhusain1311]

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

[@NetNinja]

I appreciate that! :) thank you

[@kirankothandan5529]

Mr Shawn you are an incredibly amazing teacher 🤩

[@NetNinja]

Thank you Kiran!

[@johnfawcett3503]

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

[@sensapipe]

This actually helped me a lot in my job, THANKS

[@learnsimple4592]

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 ?

[@prafulrane3591]

Anyone in 2023?

[@MrWhiteav6]

2024 😂❤

[@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); }

[@mullla1ya]

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.

[@Nasir_Haidari]

Great teacher and th best way to learn!!!

[@NetNinja]

Thank you! 😃

[@Pizzaguy2]

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

[@patapon9446]

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.

[@leonardohirsch9086]

great tutorial, even more for a spanish speaker! Thanks

[@NetNinja]

Thanks Leonardo, glad you liked it!

[@dandelion0331]

you are meant to be a good teacher

[@baroudentsiba8710]

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

[@TruthSeekerClub]

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]

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

[@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

[@deejayerick]

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

[@OhLookZombies]

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?

[@faiedweb]

Great explanation Can we expect electron.js tutorial?

[@Carl-yu6uw]

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

[@NetNinja]

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]

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

[@shahabjoon201]

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.

[@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.

[@marcscherzer]

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

[@maxosall6972]

Vue makes life easier

[@maskman4821]

yeah, so true !!!

[@FiruzzZ-777]

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

[@cap-advaith]

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

[@ebraheemlabib5133]

You're legend man 🙏🙏

[@danielmande1]

Great tenurial Thanks!

[@kelvin513]

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

[@abhijitmhatre5411]

Good explanation sir ❤️

[@oorhood]

Dude you're awesome!!

[@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!

[@MarcdeRuyter]

What is the syntax to access the form data with ?

[@andrewboddy2791]

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 ? )

[@successpeter7185]

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]

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

[@devserendipity3063]

Amazing content!!!

[@chimepalden7073]

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

[@akashdomakunti7662]

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?

[@28.ທ້າວກົ້ງເມັ່ງລໍ່ໄຟຈົງ]

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

[@BraWayne]

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

[@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

[@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

[@PetervandenHeuvel81]

This is also an idea to remove the comma: addSkill(e) { if (e.key === "," && this.tempSkill) { if (!this.skills.includes(this.tempSkill)) { this.tempSkill = this.tempSkill.replace(",", ""); this.skills.push(this.tempSkill); } this.tempSkill = ""; } }

[@shwezin1565]

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.

[@samtakahashi5602]

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]

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 :)

[@nyarehd]

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

[@GurovDmitriy]

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

[@dashabulatova7628]

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

[@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

[@firasbennasser8556]

nothing is showing up on my localhost can anyone help?

[@shukshiraj9832]

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]

add background: white; to its style

[@chatnguyenvan6402]

Greetings from distant Vietnam, I followed the instructions very carefully and followed the instructions properly. But somehow it doesn't add skills to the skills. Why? I'm new to Vue, so I look forward to helping out. Sorry my English is not good. Thank you very much !!!

[@chatnguyenvan6402]

this is script --------------------------------------- export default { data() { return { email: 'Maria', password: '', role: 'design', terms: false, tempSkill: '', skills: [] }; }, methods: { addSkill(e) { if (e.key === "," && this.tempSkill) { if (!this.skills.includes(this.tempSkill)) { this.skills.push(this.tempSkill); } this.tempSkill = ""; } }, }, };

[@chatnguyenvan6402]

html in tamplate ----------------------- Skills: {{ skill }}

[@chatnguyenvan6402]

Luckily, I have gained skills by reading the 1 community comment below. Since I can't hear English, I don't know that the ',' is like an enter. Thank you very much.

[@christophervradis7285]

I've been learning from you for a while, and i totally admire your work and i feel grateful of it, but this is the only video i am gonna dislike cause the contents of it are so but sooo rushed, so many things missing from the model directive, and the construction of the form with vue was, as the directive, rushed, but thats my opinion. Cheers

[@Ezechielpitau]

For whoever needs to hear this: Unless this is a pure hobby project that will never get released, please NEVER store the password in a database... ever

[@terandox9999]

I altered the addSkill function a bit, so i don't need to press another key than ' , ' and still don't have it in the form: addSkill(event) { if(event.key === ',' && this.tempSkill) { if (!this.skills.includes(this.tempSkill.slice(0, this.tempSkill.length - 1))) { this.skills.push(this.tempSkill.slice(0, this.tempSkill.length - 1)); } this.tempSkill = ''; } }

[@successpeter7185]

I am still a learner but i feel that asking a user to press alt and comma does not make for good user experience, so I feel this might be a better solution this.skills.push(this.tempSkill.slice(0, -1)) it worked for me but I don't know about others. In such a way the user just enter the comma

[@successpeter7185]

here is my solution for both... it quirky, but someone might refine it... if (e.key === ',' && this.tempSkill.length > 3) { let x = this.tempSkill.slice(0, -1) if(this.skills.indexOf(x.trim()) === -1) { //!this.skills.includes(this.tempSkill) this.skills.push(x); } this.tempSkill = ''; }

[@websvc]

Thanks! And BTW this matches branch 38 on github github.com/iamshaunjp/Vue-3-Firebase/tree/lesson-38

[@Zale370]

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

[@mullla1ya]

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

[@jumbo999614]

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]

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

[@jumbo999614]

@@hydraalenio3451

[@chelinchan24]

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

[@berkay8467]

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

[@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.

[@Yazuroshi]

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

[@dheerajsingh568]

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....

[@vishwasuryachowdary2028]

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

[@shellykapoor7331]

Yes

[@mix-ousoy3485]

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

[@Aronk112]

Really great playlist so far, I like the style of your explanations a lot, its so easy to understand! I got one question, regarding how up to date your Vue 3 & Firebase course is as of 2024?

[@georgi_verstapen33]

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!

[@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??

[@mattgic42]

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

[@MajidAdigozalpour]

This is Vue 2 not 3, You'd better use composition API

[@alieldeba]

great video but i did not like the way that you remove the comma you used alt comma key if i was you i will use .replace() function to delete comma from skill without confusing the user

[@mullla1ya]

1:10 I like this funny music

[@medui]

I am genuinely impressed by your teaching skills. As a professional video editor transitioning to programming-having developed a deep passion for coding-I must say that, after 13 years of self-directed learning and thousands of hours spent on video courses and tutorials, this is the first time I am compelled to provide feedback. Your teaching is exceptional. Thank you for your excellent instruction.

[@NetNinja]

Wow, thank you! :) that means a lot Medui, and thanks for watching.

[@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?

[@lalaland1234-s5i]

The first comment happened because you activated the linter. But "SignupForm.vue" contains two words so it should not return an error. But if you create new component that only have one word, you can add this at the top of the code: About the second question, I don't have Mac so I'm sorry that can't help about it.