Attention, future watchers... if you get this error: "[Vue warn]: The data property "title" is already declared as a prop. Use prop default value instead. found in ---> at src/Components/header.vue at src/App.vue " Just make sure you don't return title in the data function again. That's basically what it's telling you. That the title is declared as props already, so don't declare it again in the data function.
Great tutorials, liked and subscribed ! Just a small note, Strings are reference types. fixed bytes values (not including arrays) are primitives, for example integer (which is always 4 bytes in memory). The reason this example did work, is because strings are also immutable, meaning when you updated the string, you created a new one and updated the reference and not the actual value. So after the update, there are two string reference, one to the updated, and one to the original (now there are two strings in memory).
How do we avoid this when dealing with reference types? Are we going to apply immutability rules like duplicating the array and storing it into another variable? Btw, good tutorials bro! Keep it up! Subscriber since the early days of your channel!
Your videos are great and very well explained, I really enjoy them! For this video, you could have shown how to pass the "title" as a Primitive or as a Reference to see the 2 different ways for the same data. For example: title: "Vue Ninjas" vs title: { text: "Vue Ninjas" }
nice tutorial man thanks I am facing this warn when creating direct method in header `Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.`
Hey, man. First off, thanks so much for making this series. It's awesome and much appreciated. I did notice at about 5:50 that you added the "title" prop, but didn't remove the "title" data member from Header.vue. If they're named the same, do props take precedence over data members? Or did Vue happen to throw you an error in the console that we didn't see?
Hello, I'd like to submit a feedback. While reference types are generally object with content that can be changed, the real difference between the two examples is "re-assigning" the prop: If you change the content of a prop (e.g. modifying the content of an array or an object), it'll change the object it's referencing too, however if you re-assign the prop (i.e. props = something else), it won't change the value of the actual prop that was passed from the parent component. Therefore, even with an array, re-assigning the whole prop won't change the passed prop from the parent component.
You're welcome. Well, the way you articulate and explain code is extremely clear and easy to understand, same as Brian Cox explains physics. Thank you for sharing all this "gold" for free.
I've got a warning " [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title" "
in the header you added the title prop, but didn't delete the title variable defined in data. So does this mean that props always override data? Or is that only true because you defined props before data? When doing the on click event, is it changing the prop or data's title?
(maybe you already have the answer, but here for the others who would ask the same ...) github.com/vuejs/vue/issues/1166 In the example from the video you get: [Vue warn]: The data property "title" is already declared as a prop. Use prop default value instead. found in ---> at src\components\Header.vue at src\App.vue (tested with vue.js version 2.5.16)
Is it normal to keep the styles in the same file like you show? Or is this just for the videos to make it easier for us to see. i really like having everything for each component in the same file.
Wow, that is what I was hoping and makes me like Vue even more. What an awesome little framework that is getting overshadowed by React and Angular where you have to make a bunch of files to do what Vue does in one. I wonder why it hasn't become the go to.
I am really enjoying this tutorial. Thanks for such a great training. I've got a question: how can I change the title back to the original after clicking on changeTitle in "{{title}}"? like a toggle. Thanks
Is there a way to explicitly deepcopy or copy by reference by, say, using something other than v-bind? Manually adding lots of data into every component would be too hacky, I'm guessing. There has to be another way
I have a similar question to Joshua. I've done a bit of stuff in React and they're all about one-way, but editing a reference type in a child component seems to violate that pattern.... In practical terms when building apps to people use ref types this way from child components?
I was asking myself the same thing. From what I can tell: NO, editing a reference type in order to mutate parent state is BAD in Vue 2 (this is a change from the approach encouraged in Vue 1). Source: vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated Of course, the question then becomes "How do I tell the parent about changes in the child?" and from what I can tell so far it has to do with emitting events. Still studying how to do that properly, hoping the next video (Vue JS 2 Tutorial #24 - Events (child to parent)) will get me unstuck. :)
Is there a legit way to create a new object in memory when passing a reference type? I've come up with a clever way using set wrapped in an array but it still feels a little hacky...
*As of Jan. 2020, you will run into problems at around the 6:00 mark. Because 'title' is a key that has been used already in Header.vue, you will not be able to use in App.vue. Simply change or delete 'title' from the header file under data and it should work fine.
I found a work around.. you can pass the "referenced" object to a variable ....using JSON.stringify and JSON.parse.. i was able to make a copy of it.... working so far..didn't play around too much
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title" i have gotten this when check Primitive. THANKS
This video seems no longer to be true. Example: jsfiddle.net/50wL7mdz/540402/ - here I pass primitive string variable to child components, and when parent's component data is changed, childs also update theirs data.
"If parent's component data is changed, childs also update theirs" is true. But I think you need to watch carefully and pay attention to details. He wanted to change one of the child's data not the parent's. but if the prop is a reference type, it will also change the data in other components. but if the prop is a primitive type, the specific child's data can be changed without affecting other component's data
