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

Anyone in 2023?

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.

for people who face when adding .alt it's not inserting , add this line to trim the comma
this.tempSkill = this.tempSkill.replace(/,/g, ' ');

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

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.

for deleting I kept the div like it was and just added @click:
<div class="pill" v-for="skill in skills" :key="skill" @click="deleteSkill(skill)">
{{ skill }}
</div>

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!

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

zajebisty tutorial

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!

Mr Shawn you are an incredibly amazing teacher 🤩

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

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

Ok, let give this a wow!

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

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"

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

This actually helped me a lot in my job, THANKS <3!

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.

great tutorial, even more for a spanish speaker! Thanks

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

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.

My solution to deleteSkill:

HTML:
<div v-for="skill in skills" class="pill">
<span @click="deleteSkill(skill)">{{ skill }}</span>
</div>

JAVASCRIPT:
deleteSkill(skillToDelete) {
this.skills = this.skills.filter((skill) => skillToDelete === skill ? false : true)
}

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

Thank you, thank you, thank you!!

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?

excellent explanation, tnks

How to get github code

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 = '';
}
}

Your way of removing the array element is realy creative :D
I solved this problem using "this.skills.splice(this.skills.indexOf(skill),1);"

nothing is showing up on my localhost can anyone help?

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

What is the syntax to access the form data with <script setup> ?

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

you can write
deleteSkill(e){
if(this.skills){
this.skills.splice(this.skills.indexOf(e.target), 1)
}
}

instead of using filter

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

For the sake of performance I encourage you to perform deleting of items (the challenge) like this:

<div v-for="(skill, index) in skills" :key="skill" class="pill" @click="deleteSkill(index)">

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.

Hello,
for the "deleting skills challenge'" I just did this:
deleteSkill(e) {
this.skills.splice(this.skills.indexOf(e), 1);
}
and after that i just attached click event to the "pill" class. Nice and easy way to do it.
By the way great tutorial videos, keep it up! 👍

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

Outside of the example case, we could also use this.skills.push(this.tempSkill.slice(0, -1)) to store a skill without the coma, as "ugly" as it looks — in my case, the alt + coma makes an infinite sign.
Thanks again for the tutorial, I'm just discovering Vue before a retraining as a web developer and this is priceless !

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 = '';
}

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