Improve the section about Single Root Element

[Masa-Shin]

https://vuejs.org/v2/guide/components.html#A-Single-Root-Element

So this might be a good time to refactor the component to accept a single post prop instead:

I suppose refactoring to accept a single prop is not a good practice now for the following reasons.

1. You can now pass an object to the component without changing the definition of the properties, as mentioned here: https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

2. It makes harder to validate each original prop.

So I'm wondering if we should replace it with one using v-bind without an argument (or at least add a note about it).

[phanan]

Sounds good! What do you think about something like this, which should show both ways to achieve what we want, and still is concise enough?

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post" <!-- or v-bind="post" -->
></blog-post>

[Masa-Shin]

Thank you! Looks fine but the latter syntax would be invalid after refactoring to accept a single prop, so maybe a bit misleading I think. Instead could we put a small note like "!) We also support Passing the Properties of an Object" or something like that?.

[sarahdayan]

Do you think it's necessary to have this section about refactoring many props to a single one undr A Single Root Element? It feels like it doesn't really belong here.

Besides, the Passing Data to Child Components with Props section right before already starts tackling that topic. It feels like it definitely would belong there instead. What do you think?

[Masa-Shin]

I agree with @sarahdayan. It is about passing properties and fits better in the previous section.

[Masa-Shin]

The Single Root Element section needs rewrite a bit for consistency then.