just right now, in 2020, i needed to pass variables from store to vuetify calendar item. in a component that repeats itself many times. each time with different data comes from store. you solution just worked perfectly for me. thank you.
I had to watch this video twice and repeated parts of it because the purpose of the example was not so clear and it understood at very end of the lesson. many thanks for such amazing lessons.
Hey man, thanks for the tutorials. For someone who started developing like me, they're very helpful. I think It became incredibly painful to follow after 5:29. Not because of your narrative, but because how vue.js implemented this. Is it me or is it really counter-intuitive when it comes to 2-way binding between separate components?
It's a 2016 video but still. Just started with Vue and component communication is still quite confusing. After hours struggling this helped me fix my issue :D Thank you!
ah . its a brilliant teaching way ever i have seen :) keep it up such easy and cool examples and please make an video on VUEX with such easy examples , i really need.
Thanks so much for your absolutely fantastic feedback Chalak, this really means a lot to me! I actually do have a Vuex series, maybe this is also interesting for you: academind.com/learn/vue-js/vuejs-and-vuex/
Great video. Great channel. You are very good at articulating these concepts in a concise manner. I think it would be helpful for me if the naming of your components and their content was more semantic (i.e. Parent Comp, Child Comp, etc...). Love your work! You contributed to me getting my first developer job.
I was having trouble with the last part of this tutorial. I don't know if there was a change to babel, Vue.js, or one of the other packages since this video was published. In order to make it work, I had to make a couple of changes. First, I changed the app-input tag to the following: Somehow the camel-case name for the event was throwing it off. Of course, I also had to change the emit statement in the changeMessage function for the input component to: this.$emit('messagechanged', this.message); Second, I had to add the 'updateMsg' method to the app-input component and defined it like so: export default { data() { ..... }, components: { ...... }, methods: { updateMsg(val) { this.message = val; } }
I think in your example you have a good show one of the main features of Vue.js - the ability to change data. In particular, modifying data through a surfacing event.
it seems to me, in this series of videos on Vue.js you missed one important and rather intricate ( I think ) point in Vue.js - there is the theme of the animation ( transition )?
It's true, I focus on the main features here. If you want to dive deeper into Vue.js (e.g. also learn more about Animations), you may have a look at my >16hour course on Udemy - would be great to welcome you there. It's optional of course, I'll also keep on releasing content on RUclips but it will of course be more general/ cover a broader range of topics/ frameworks/ languages.
Hello Sir, I need your help Scenario : I have created a parent and few child components and those child components have some form-elements, all i have to do is to grab data from all those form-elements, at time of submit(which is part of parent) Actual output So how can i get user data (text/select/radio) from different child components into parent component ?
Hey, can i ask? When i call the 'messageChange' in Message.vue, i got error like 'v-on is missing expression.' and '[vue/valid-v-on] 'v-on' directives require a value or verb modifier (like 'stop' or 'prevent').'
Just trying to wrap my head around this way of passing props, but if the message property in the Input component constantly gets overwritten by it's parent component (_Message.vue_) then couldn't you theoretically just emit the event passing in _e.target.value_ as the second param and leave line 18 _this.message = e.target.value;_ out of the changeMessage() method entirely? This seems to work but I'm not sure whether or not this is bad practice. Just for clarity I mean changing it to look like this: changeMessage(e) { this.$emit('messageChanged', e.target.value); }
Yes, you don't have to overwrite the prop, you can emit the changed value directly. I only did overwrite it to show that you also can use properties everywhere in your code and even (temporarily) overwrite them.
this is a bit confusing to me. i'd suggest supporting the theoretical explanation with a real-life example as to how and why would we need to use such a confusing concept. though you are an incredible teacher and easy to understand in general.
you are very welcome), I actually am watching your Vue course in Udemy right now :). I am a Junior Front-End developer at the moment, VueJs is my first JavaScript framework. if you'd advice me regarding my next step after Vue, do you think it's better to have another framework? React for instance? or move to learn backend and server side languages? thanks in advance)
Max, Is there a way to make the Udemy course modules combined into longer vids like here in your RUclips channel? The shorter length vids, I sometimes have to reference something you said earlier and I would have to go back to the previous video to refresh. Whereas with a longer video, I can just rewind Not a deal breaker though , your course is amazing regardless
Actually, most students prefer shorter videos, that's why I'll stay with this approach. I guess the possibility to make short breaks between "learning chunks" is something people like :)
Hey, first I want to thank you for your tutorials. You speak a good understandable englisch and you can explain in a very good way. However, I have a slight problem: In my Vue-Instance I'm creating in my main.js I define a filter named "translate". It should be used to replace a string (key) with a translated message (value). Now I'm trying to make this filter accessible in all my components, but I don't have any idea to do this. I think adding registering the filter in every component is bad practise. So how can I access a filter defined in my Vue-Instance in all components without placing my code for the filter in every single component I have?
Thanks for your awesome feedback! If you want ta global filter, simply use Vue.filter('filterName', (value)=>{...}) in your main.js file (before you create the new Vue() instance). You can then use such a filter everywhere
how to send data from global vue instance to a vue component? I have an app.js file where i have some data which need to get sent to a vue components. how to so that?
I'm also a big Vue fan and I definitely recommend the course as it shows you how to work with view step-by-step. In case you're not sure you can also have a look at the first module (it's for free) to get a better feeling for the course content: www.udemy.com/vuejs-2-the-complete-guide/?couponCode=ACAD_M
mutating the props directly will give error vuejs.org/v2/guide/components.html#One-Way-Data-Flow, also does vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication apply to the scenarios in the video ?
It gives you a warning, not an error. In many cases, you might not want to mutate props because your changes get overwritten. But sometimes you actually want that behavior and there's nothing wrong with overwriting props.
All these big frameworks are very confusing for beginners, apparently. Everyone says it's difficult at first but is worth learning for bigger projects and, well... We have to believe them.
Guys... chill. Take your time, it's worth it. For large projects, where the meat is, such frameworks and tools are the bare minimum. It may look daunting at first but when you understand the challenges of big projects with many people collaborating you will see that even these frameworks and tools are not enough.
@@viktorskarlatov8227 if they're not enough then they're not good tools. They're just the less "shitty" tools. Maybe a really useful framework is yet to be created. At least vanilla JS is not a complete mess to understand
Vue is just a library, and it's the easiest between the most popular frameworks/libraries. I know the kind of stuff you see in this video seems not difficult, but like a lot to learn and even memorize, but once you write 2 or 3 components, it becomes pretty repeating and obvious, so you don't even need to get your head around it except for the first couples times. Also, all these tools are way faster and better than anything you could do with vanilla (except for small projects, of course).
I've always thought frameworks are supposed to make things easier. But in fact they just complicate things even more. Why can't we just stick to vanila js? It's so simple to use.
A bit complicated explanation, even for a junior developer, who has the knowledge of the basics. I am moving over from React onto Vue and I know how props usually work in React, which is meant to be similar in Vue, but I found the explanation bit not very useful. Thank you for your time dude.
Mindspace You have two components printing out the same thing, a msg and message data with different values, and it isn't clear what you are trying to do or what the components do. It would be better if you made the components more realistic, and have clear purposes, so they are easier to distinguish.
Mindspace Sorry, I was wrong, I guess I just wasn't paying attention lol. But why can't you change the prop? Is the reason it rerenders because it sees the prop was changed, so it renders the parent component with that sends the prop?
You can change the prop but it gets overwritten whenever the parent component decides to pass the prop again (which happens if the data, bound to the prop in the parent component, gets updated).
That's what I was thinking. Awesome. I'm thinking of buying your course, but I'm not sure if I would need it since I am only creating somewhat simple applications. Do you recommend it if I'm going to use Vue in production, or are these free tutorial suffice?
These implementation is ripped off angular, so it's the same. Of course it's easier with services, but both vue and react also have many other ways to communicate between components. This is just the most straightforward one.
I've got a problem: I am using it on a top position in my main.js file. I can use this instance to store my application state and it's works fine on dev server. But webpack doesn't allow me to build production package :( export const busVue = new Vue({ data(){ return{ state:{} } } }); any ideas how to fix? Thanks
Two sentences give me the whole idea in 2 minutes. This man is great!
Wow, that's so cool to read, thank you very much for sharing this awesome feedback!
just right now, in 2020, i needed to pass variables from store to vuetify calendar item. in a component that repeats itself many times. each time with different data comes from store.
you solution just worked perfectly for me. thank you.
I love Vue! It took one week to break the code. By being a old fashioned PHP programmer i really saw the light!
I had to watch this video twice and repeated parts of it because the purpose of the example was not so clear and it understood at very end of the lesson. many thanks for such amazing lessons.
Happy to hear you enjoyed it, thanks for your feedback Ahmad!
I got my brains scrambled
Hahaha, this in my life.
Once u use it a few times it's a lot easier to understand
Once you repeat it like 5 times, it becomes second nature XD The tricky part is the event emition.
Max - your vids are great. This topic is not articulated well in the docs and your vid cleared some things up. Really nice.
Great to hear that, thanks so much !
OMG, your way in explaining things is awesome and i really like your series
Awesome to read that you like my explanations. Thank you so much Hamza :)
You are awesome.
The only place where I get my answer quickly. Thanks for upload (y)
So happy to read that Shashwat, thanks a lot for your support!
Thank you so much! I spent an hour trying to figure this out another way.
Great to hear you liked it!
at first, I didn't understand but after practice I got the point
Very good tutorial. I am new to vue.js, and this video clip tells me how to use props and events.
Many thanks.
Happy to hear that this was helpful Charls - thanks for your nice feedback!
I feel I would need a complete series on component communication with props/events to understand them.
Try using Vuex, that's what it is meant for. :)
your teaching style is great
Thanks a lot, really makes me happy to read that!
I've signed up for your full course on Udemy. it's very thorough
THANK YOU SO MUCH!!!! I've been struggling with this and you cleared it up for me :)
Hey man, thanks for the tutorials. For someone who started developing like me, they're very helpful. I think It became incredibly painful to follow after 5:29. Not because of your narrative, but because how vue.js implemented this. Is it me or is it really counter-intuitive when it comes to 2-way binding between separate components?
Use Vuex :)
It's a 2016 video but still. Just started with Vue and component communication is still quite confusing. After hours struggling this helped me fix my issue :D Thank you!
Hey man, you saved me with this tutorial, thanks!
Awesome to read that Edgar, thank you for your great feedback!
ah . its a brilliant teaching way ever i have seen :) keep it up such easy and cool examples and please make an video on VUEX with such easy examples , i really need.
Thanks so much for your absolutely fantastic feedback Chalak, this really means a lot to me! I actually do have a Vuex series, maybe this is also interesting for you: academind.com/learn/vue-js/vuejs-and-vuex/
Nice work BUDDY
Дай тебе Бог здоровья, братишка)
vuejs is the best of the bests
I kind of confuse but fun. Thumbs-up!
I love the way of teaching ! :-)
And I love your comment Nilanjan, thank you for your awesome feedback!
Thank you, this is exactly what i needed
Great to hear that, thank you so much!
Great video. Great channel. You are very good at articulating these concepts in a concise manner. I think it would be helpful for me if the naming of your components and their content was more semantic (i.e. Parent Comp, Child Comp, etc...). Love your work! You contributed to me getting my first developer job.
Thanks for your awesome feedback and for this suggestion! :)
You rock!!! thank you so much
I was having trouble with the last part of this tutorial. I don't know if there was a change to babel, Vue.js, or one of the other packages since this video was published. In order to make it work, I had to make a couple of changes. First, I changed the app-input tag to the following:
Somehow the camel-case name for the event was throwing it off. Of course, I also had to change the emit statement in the changeMessage function for the input component to: this.$emit('messagechanged', this.message);
Second, I had to add the 'updateMsg' method to the app-input component and defined it like so:
export default {
data() {
.....
},
components: {
......
},
methods: {
updateMsg(val) {
this.message = val;
}
}
Great examples!
Thank you :)
Hi there, I'm using buefy autocomplete instead of input and in my case you have to change "event.target.value" to just "event"
you saved my ass, dude!
So awesome to read that stefan! I'll try my best to keep it going.
Superb tutorial, I just have a problem mu props data is returning null value. Anyplace where I have gone wrong?
Your Udemy course is ace btw!
Thanks so much, that's awesome to hear - I'm glad you're enjoying it! :)
cool example! possible variables would need to give more unique names for clarity. but in general - cool example!
Thanks for your suggestion and the great feedback! I'll try to be more clear about my variable naming/ choose better names in the future ;-)
I think in your example you have a good show one of the main features of Vue.js - the ability to change data. In particular, modifying data through a surfacing event.
it seems to me, in this series of videos on Vue.js you missed one important and rather intricate ( I think ) point in Vue.js - there is the theme of the animation ( transition )?
It's true, I focus on the main features here. If you want to dive deeper into Vue.js (e.g. also learn more about Animations), you may have a look at my >16hour course on Udemy - would be great to welcome you there. It's optional of course, I'll also keep on releasing content on RUclips but it will of course be more general/ cover a broader range of topics/ frameworks/ languages.
Hello Sir, I need your help
Scenario :
I have created a parent and few child components
and those child components have some form-elements, all i have to do is to grab data from all those form-elements, at time of submit(which is part of parent)
Actual output
So how can i get user data (text/select/radio) from different child components into parent component ?
Hey, can i ask? When i call the 'messageChange' in Message.vue, i got error like 'v-on is missing expression.' and '[vue/valid-v-on]
'v-on' directives require a value or verb modifier (like 'stop' or 'prevent').'
Nevermind, i have clear that problem. Thank you
What if you have multiple field inputs inside input component? Do I need to add multiple methods to handle the changes in my inputs?
i have different components in my Components folder, how do i register each of them with Vue.component('multiselect',multiselect) just for example.
cool video, thank you!
Thanks a lot for your comment Kirill!
Is it necessary to set `this.message` in the child? It should propagate down from the parent after the event is handled, no?
Indeed, it's not necessary
Is there a way to access the 'msg' prop from the data() function's definition?
Just trying to wrap my head around this way of passing props, but if the message property in the Input component constantly gets overwritten by it's parent component (_Message.vue_) then couldn't you theoretically just emit the event passing in _e.target.value_ as the second param and leave line 18 _this.message = e.target.value;_ out of the changeMessage() method entirely?
This seems to work but I'm not sure whether or not this is bad practice.
Just for clarity I mean changing it to look like this:
changeMessage(e) {
this.$emit('messageChanged', e.target.value);
}
Yes, you don't have to overwrite the prop, you can emit the changed value directly. I only did overwrite it to show that you also can use properties everywhere in your code and even (temporarily) overwrite them.
Ah I see! Thanks for your amazing content and all the effort you put into your videos Max, you deserve way more views and subs imo.
this is a bit confusing to me. i'd suggest supporting the theoretical explanation with a real-life example as to how and why would we need to use such a confusing concept. though you are an incredible teacher and easy to understand in general.
Thanks for your feedback, much appreciated! :)
you are very welcome), I actually am watching your Vue course in Udemy right now :).
I am a Junior Front-End developer at the moment, VueJs is my first JavaScript framework. if you'd advice me regarding my next step after Vue, do you think it's better to have another framework? React for instance? or move to learn backend and server side languages?
thanks in advance)
how did you record your self and screen like that ? what tools did you use ?
Please have a look at these videos Ikhsan => ruclips.net/video/RqZqmTUOaUo/видео.html
thanks for this tutorial, it helps me a lot.
Max,
Is there a way to make the Udemy course modules combined into longer vids like here in your RUclips channel?
The shorter length vids, I sometimes have to reference something you said earlier and I would have to go back to the previous video to refresh. Whereas with a longer video, I can just rewind
Not a deal breaker though , your course is amazing regardless
Actually, most students prefer shorter videos, that's why I'll stay with this approach. I guess the possibility to make short breaks between "learning chunks" is something people like :)
Hey, first I want to thank you for your tutorials. You speak a good understandable englisch and you can explain in a very good way.
However, I have a slight problem: In my Vue-Instance I'm creating in my main.js I define a filter named "translate". It should be used to replace a string (key) with a translated message (value). Now I'm trying to make this filter accessible in all my components, but I don't have any idea to do this. I think adding registering the filter in every component is bad practise. So how can I access a filter defined in my Vue-Instance in all components without placing my code for the filter in every single component I have?
Thanks for your awesome feedback! If you want ta global filter, simply use Vue.filter('filterName', (value)=>{...}) in your main.js file (before you create the new Vue() instance). You can then use such a filter everywhere
what the difference between 2 way binding and Props Down Events Up ?
how to send data from global vue instance to a vue component? I have an app.js file where i have some data which need to get sent to a vue components. how to so that?
Thank Sir
thank you so much
I love Vue ❤️, do you recommend me your udemy course? I just have basic knowledge of Vue
I'm also a big Vue fan and I definitely recommend the course as it shows you how to work with view step-by-step. In case you're not sure you can also have a look at the first module (it's for free) to get a better feeling for the course content: www.udemy.com/vuejs-2-the-complete-guide/?couponCode=ACAD_M
mutating the props directly will give error vuejs.org/v2/guide/components.html#One-Way-Data-Flow, also does vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication apply to the scenarios in the video ?
It gives you a warning, not an error. In many cases, you might not want to mutate props because your changes get overwritten. But sometimes you actually want that behavior and there's nothing wrong with overwriting props.
Superrrrrrrrrrrrr!!!!!!!
Is it just me , or this really confusing?
All these big frameworks are very confusing for beginners, apparently. Everyone says it's difficult at first but is worth learning for bigger projects and, well... We have to believe them.
It's an absolute fuckfest. What the fuck was wrong with html css and pure JS. Fuck frameworks.
Guys... chill. Take your time, it's worth it. For large projects, where the meat is, such frameworks and tools are the bare minimum. It may look daunting at first but when you understand the challenges of big projects with many people collaborating you will see that even these frameworks and tools are not enough.
@@viktorskarlatov8227 if they're not enough then they're not good tools. They're just the less "shitty" tools. Maybe a really useful framework is yet to be created. At least vanilla JS is not a complete mess to understand
Vue is just a library, and it's the easiest between the most popular frameworks/libraries.
I know the kind of stuff you see in this video seems not difficult, but like a lot to learn and even memorize, but once you write 2 or 3 components, it becomes pretty repeating and obvious, so you don't even need to get your head around it except for the first couples times.
Also, all these tools are way faster and better than anything you could do with vanilla (except for small projects, of course).
Still can't believe that I've been working with a Vue project and never come across two way binding in any place 🤣
This totally fucked my brain up
.......proof of concept that two-way data binding is a bad idea?
Great)
how can you do this in 1 file?
thanks
What is the work of export default there?
It's required to import the component into other files. This is what allows you to split up your code
Academind Thanks
Thanks :) Like
Thank you so much :)
this was the most confusing explanation ever lol
I've always thought frameworks are supposed to make things easier. But in fact they just complicate things even more. Why can't we just stick to vanila js? It's so simple to use.
How do I get it to show up in the home page. In the App.vue file?
Sorry, what do you want to show up where?
I had skipped one of your videos. Can you number them?
Wait....what?
The impot and export part is so confusing.
I feel like i don't understand anything about development :(
this has always been my downfall with frameworks like view and react :(
Practice makes perfect. Use any framework with about a month and you will start to find it easy (as with any other tool/language).
It is easier to add ".sync" to prop.
That's not correct for Vue.js 2 (which this video is about). sync is deprecated and shouldn't be used => github.com/vuejs/vue/issues/2873
A bit complicated explanation, even for a junior developer, who has the knowledge of the basics. I am moving over from React onto Vue and I know how props usually work in React, which is meant to be similar in Vue, but I found the explanation bit not very useful. Thank you for your time dude.
Hi Master Do you have email?
Little bit confusing than other videos.
So complicated, 😞
omg too much file
This is not one of your good videos, couldn’t follow at all
Such a mess
This is an extremely poor example
Sorry to hear this - could you be more precise to help me improve future videos? What exactly did you not like about it?
Mindspace You have two components printing out the same thing, a msg and message data with different values, and it isn't clear what you are trying to do or what the components do. It would be better if you made the components more realistic, and have clear purposes, so they are easier to distinguish.
Mindspace Sorry, I was wrong, I guess I just wasn't paying attention lol.
But why can't you change the prop? Is the reason it rerenders because it sees the prop was changed, so it renders the parent component with that sends the prop?
You can change the prop but it gets overwritten whenever the parent component decides to pass the prop again (which happens if the data, bound to the prop in the parent component, gets updated).
That's what I was thinking. Awesome.
I'm thinking of buying your course, but I'm not sure if I would need it since I am only creating somewhat simple applications. Do you recommend it if I'm going to use Vue in production, or are these free tutorial suffice?
If this was Angular, I would just have my components referencing from one service. No need for these emitting and listening stuff.
These implementation is ripped off angular, so it's the same. Of course it's easier with services, but both vue and react also have many other ways to communicate between components. This is just the most straightforward one.
This video is so confusing. like what????
I'm sorry to hear that James. Can you let me know what exactly was unclear?
I've got a problem:
I am using it on a top position in my main.js file. I can use this instance to store my application state and it's works fine on dev server. But webpack doesn't allow me to build production package :(
export const busVue = new Vue({
data(){
return{
state:{}
}
}
});
any ideas how to fix?
Thanks