Fixed v-for/v-if priority and explanations

[NataliaTepluhina]

Description of Problem

In v3, the precedence of v-for and v-if when used on the same node is is now switched.

• v2: v-for takes precedence over v-if
• v3: v-if takes precedence over v-for

Proposed Solution

Update respective sections of the guide

Additional Information

Close #534

[kazupon]

LGTM!👍
Thanks quick fixes!

[skirtles-code]

@NataliaTepluhina Thanks for inviting me to participate in the review for this.

I have made some suggestions, I hope they're helpful.

[skirtles-code]

I think this needs moving up a line. It's potentially confusing because the next line also mentions todo. Perhaps that line should be removed?

[NataliaTepluhina]

I don't think we should remove this line altogether because we need to show that this code snippet is incorrect. I changed a message to reflect this better

[skirtles-code]

Ah, sorry, I wasn't clear.

I wasn't suggesting removing the comment line. I was suggesting removing the next line, {{ todo }}. The problem is that it mentions todo, so it wasn't entirely clear whether the error message was referring to the v-if or the {{ todo }}.

Moving the comment up has helped. I just wonder whether replacing the {{ todo }} with, e.g. ... or a comment would remove any potential for someone to misunderstand? One of the earlier examples uses <!-- content -->, so perhaps that?

<li v-for="todo in todos" v-if="!todo.isComplete">
  <!-- content -->
</li>

Now I look a bit closer there's actually another problem with the {{ todo }}. The v-if="todo.isComplete" implies that todo is an object with an isComplete property but the {{ todo }} seems to be treating todo like it's a string. It isn't technically wrong, I just worry about someone getting distracted by the {{ todo }} and thinking it has something to do with the error.

If you do decide to change it then the next example would need updating to match.

[NataliaTepluhina]

@skirtles-code thank you for the awesomely thorough review and suggestions! I've applied fixes, would you mind taking a second look?

[phanan]

Nice 👍 I'm being an annoying nitpicker again and left some non-blocking comments.

[skirtles-code]

@NataliaTepluhina I've made one more comment trying to clarify my earlier suggestion about one of the examples. I might just be worrying about nothing.

Happy for this to be merged if you don't think it's worth changing.

[bencodezen]

Great work on this @NataliaTepluhina! Other than the phrasing suggestions An added in the PR, it looks good to me!