Child-Parent array props

[achembarpu]

Hi!

I've been trying to get this working, for quite some while now, but it isn't. I think I may be missing a fundamental idea here.

The linkedlist-render and linkedlist-input components are not receiving numbersList as props.

I would appreciate any help/thoughts.

Thanks!

EDIT: JS Bin: https://jsbin.com/rijiluculu/edit?html,js

[atinux]

Hi @arvindch

Can you upload it on JS Fiddle, JS Bin or Codepen to test it easily and help you to debug it!

Thank you

[achembarpu]

JS Bin: https://jsbin.com/rijiluculu/edit?html,js

Yep, sorry about that. Tried to get it running on JSfiddle and JSbin, but finding a compliant vue.js over https was annoying - https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.js is the final solution.

So, basically, props fail to pass to the child components. I've declared them in the child definitions.

[atinux]

Hi @arvindch

I will try to do my best to explain to you the most clearly possible, even if my native tong isn't english.

First, you have to look at the console to see what's wrong in your code, vue.js is well designed and it explains with warning what are the errors he found in your code.

1st warning: [Vue warn]: Missing required prop: numbersList

Your code :

<linkedlist-render :numbersList="renderLeft" position="left"></linkedlist-render>

As described in the documentation about props (http://vuejs.org/guide/components.html#camelCase_vs-_kebab-case) : HTML attributes are case-insensitive. When using camelCased prop names as attributes, you need to use their kebab-case (hyphen-delimited) equivalents.

So your code should be:

<linkedlist-render :numbers-list="renderLeft" position="left"></linkedlist-render>

The first warning is now fixed :+1:

Second warning: [Vue warn]: Prop "numbersList" expects a two-way binding type.

You should take a look at this documentation: http://vuejs.org/guide/components.html#Prop_Binding_Types

If you want a two way binding (but your app does not need it because you only display the event or you use the event manager to propagate the change. I advice you to set twoWay: false in your component.props keys.

Here a version of your code updated to follow (my guess) the best practices of vue.js described in the documentation. It would be perfect to have your expert point of vue @yyx990803 about my updated version: https://jsbin.com/mequne/edit?html,js

Demo: https://output.jsbin.com/mequne Write 23 11 8 72 400 15 2 in on of the input and leave the focus (for the change event to propagate);

Hope you can see more clearly of Vue.js works :)

[achembarpu]

@Atinux -

Yep, I'd noticed those warnings, but had no idea why they were being thrown. I'd thought that I was indeed passing the props, and doing something else wrong.

Somehow, I completely missed the camelCase vs kebab-case part in the docs. That was my fundamental mistake.

Oh, I thought that either :var.sync or two-way: true should been enough. Makes sense though, since the two-way part is only a check and not an assertion.

Yep, the updated version works perfectly. Neat!

vue.js is a refreshing change after react.js, where I was used to just writing tons of boilerplate code for stuff that vue simplifies out-of-the-box.

Thank you so much! I really appreciate your detailed analysis and reply. :D

[atinux]

It's with pleasure @arvindch :) I read all the documentation yesterday so I had to make in practice my learning and I wanted to help @yyx990803 for his amazing work by helping him to close some issues!

If I resolved your issue, you can close it :)

PS : I used to to a lot with Backbone.js, I wanted to try Angular.js or React.js, but Vue.js seems to be a perfect combination of these frameworks!

[achembarpu]

Indeed. @yyx990803 has done some amazing work on vue.js.

Thanks again, @Atinux ! :)

note: Closing issue now.