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!
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.
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?
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.
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.
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
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)]
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!
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.
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?
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
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.
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.
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 !!!
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.
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....
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.
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?
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!
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??
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?
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?
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.
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
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?
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.
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
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 = ""; } }
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?
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
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 ? )
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.
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"
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.
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
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
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
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
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
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.
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...).
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?
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
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.
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 = ''; } }
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 [] } } }
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!
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 :)
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.
Anyone in 2023?
2024 😂❤
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!
He is a great teacher for sure, coming from react as well and I understand pretty much everything so far having the react background.
Mr Shawn you are an incredibly amazing teacher 🤩
Thank you Kiran!
This actually helped me a lot in my job, THANKS
you are meant to be a good teacher
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.
Hey Shaun thanks a lot!... Are you going to cover the deploy process?
Great explanation
Can we expect electron.js tutorial?
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?
add background: white; to its style
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;
}
nc
Gigachad
thanks dude!
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.
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.
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
@@michrisoft You are right in both commentaries, although he says in the video that you need to use a span tag.
@@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.
Your tutorials are better and more clear compared to any other courses for beginners, great work!
One question: Would it be better to use `this.skills.push(this.tempSkill.trim().replace(",", "");` in terms of usability?
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
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)]
}
}
}
2:10 Signup form
5:25 2-way data binding
13:47 Checkboxes
33:09 Delete
35:51 Submit form
40:30 Validate
Hmm
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.
Thank you! 😃
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.
how can i do that? .enter or .13 nothing happen
@@hydraalenio3451
@@hydraalenio3451 You had to also remove the "e.key === ',' && " inside function addSkill(e)
20:44 adding skills. "html, css, blah blah... hopefully vuejs by now hehe"
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!
I guess you're still baffled
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.
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
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?
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
I just used the the String.replace() method to remove the comma.
INB4 String manipulation is inefficient, probably.
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())
or this.tempSkill = this.tempSkill.replace(/,/g, ' ');
Ok, let give this a wow!
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.
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.
am here stuck actually after adding alt it stopped firing my input. I am looking for another way to do this.
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 !!!
Hey Stephen, thanks so much :)
We're waiting for MEVN Stack, thank you for the video!
Thanks for the tutorial! It was really helpful.
Glad to hear that! :) thanks for watching Kolya
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.
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....
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.
deleteItem(e) {
this.skills.pop(e)
}
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?
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!
to remove the ','; we could use :
{{ skill.replace(/,/g, '') }}
5:25 - 2-way data binding
10:37 - select boxes (also checkboxes from 14:00)
20:37 - keyboard events
32:00 - deleting skills
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??
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 ?
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?
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?
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.
Wow, thank you! :) that means a lot Medui, and thanks for watching.
Is there growing demand within the UK jobs market for Vue skills, relative to React or Angular ?
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.
@@NetNinja I like the syntax of Vue.js a lot better than React or Angular. Would you advise against learning Vue though?
Heyy shaun, we love ur teaching.expecting full react course in udemy.we love to pay for your effort
Yes
My keyboard, for some reason, registers the key pressed as 'Comma' and not ',' - I'm not sure why.
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
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?
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.
30:05 .alt doesn't work, the function/method doesnt get executed at all when I add that.
45:26 Why is the skills variable not an array? Why is it proxy and is like an object?
how to fetch data put, post to show in table. if you you have a video plz shard link to me plz
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
This is Vue 2 not 3, You'd better use composition API
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 = "";
}
}
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?
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
Hi guys just so you know, ```@keyup.alt="yourMethod"``` command works on Linux. For Windows users please use ```@keyup.prevent="yourMethod"```
nothing is showing up on my localhost can anyone help?
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 ? )
watched other tutorials and the explanations are not as good. as a beginner, your tuts are the best! god bless
I appreciate that! :) thank you
1:10 I like this funny music
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);
}
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.
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"
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.
why do such a heavy operation on an array when we know the index - delSkill(index) {
this.skills.splice(index, 1);
},
this series is just really really simple to understand.
GreatJob!
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
Thanks! And BTW this matches branch 38 on github github.com/iamshaunjp/Vue-3-Firebase/tree/lesson-38
So v-model means Virgin-model lol
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
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
how to close the serve running on the port 8080, or do I need to close it?
I find the answer: control + c
Hi Shaun! I think you forgot to put "20:37 - keyboard events" chapter
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
I am on a MacBook, the .alt key modifier doesn't work as stated in the video. But it works with the .ctrl modifier
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
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.
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
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.
Question - will this learning guide allow me to host this project on Firebase for free?
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...).
Was looking for that too. Thank you!
How to get github code
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?
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
zajebisty tutorial
Trust me you have cleared my doubt I am stopping video at 16 and appreciating you here!
why can keyup.alt doesnt work? its just continue word with comma and doesnt add it to array
In the challenge, I used event.target.remove().
Is this acceptable?
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.
Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!
Vue makes life easier
yeah, so true !!!
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 = '';
}
}
Interesting.
Pleasee get us some full mern stack app
It is so in demandd
mevn would be so good!
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
love this video so much. clear and easy to comprehend.checking the video while coding, felt good about it.
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 []
}
}
}
Could you please share information or any link to model driven form in vue js ?
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!
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 :)
1:10 thx for the music. It really helped me to get through the waiting time
Would you do tutorial about Alpine JS.. Thx
What is the syntax to access the form data with ?
Why are you not using the for attribute on labels?
Thanks!
31:00 you could use str.replace(" ,"," ") to remove ' , '