Why use `v-if` after `v-for` in the list of attribute order of Styleguide

[MachinisteWeb]

Hi @chrisvfritz,

I read in the style-guide/index.md i am currently translated the following thing:

v-for should be before v-if in the order of document.

— https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended

When I parse myself an HTML Vue template, I check if the v-if expression of current element I read is true before start to read more about this element and all its child elements.

For exemple, in this case:

<li v-if="..." v-for="...">...</li>
<li v-else-if="..." v-for="...">...</li>
<li v-else-if="..." v-for="...">...</li>
<li v-else-if="..." v-for="...">...</li>
<li v-else-if="..." v-for="...">...</li>
<li v-else >...</li>

I want first know witch case I want before know more about what this element do (read v-for and continue to parse this subpart).

So what is the reason of this order if it's not the reading flow?

I see in the original Markdown document the two have 2. :

2. **Rendu de liste** ...
...
2. **Conditionals** ...

I think it's maybe because of I just explained. But, in the HTML rendering of documentation, there is no way to allows two points of an « ordered list (<ol>) » to have twice « 2. » just like .md file.

What's your throughs?

EDIT : maybe the good practice is never use v-if with v-for but I not still read this in styleguide and in my tested case, v-if work fine with v-for on the same tag.

[MachinisteWeb]

I just see this :

So if I use v-if on the same item as v-for it's more like a filter than really a case system so, we first read the loop information before read filter condition.

But, as said the warning message, the better way is to use a wrapper for condition, and use a computed property for loop filter.

I have my answer :) I will transform my issue title more like a question to allows others people find this answer.

[chrisvfritz]

@haeresis Thanks! Do you think we should make this its own style guide rule, to add that information you were missing?

[MachinisteWeb]

I don't know. If I would writing something, that could be something like that but I'm believe is better, I don't know if it better.

I need your advice @chrisvfritz ;)

### Avoid `v-if` on same element as `v-for` <sup data-p="a">???</sup>

**Prefer a computed property instead of usage of `v-if` as filter in a `v-for` loop that displays only one case when the list of item is big.**

Usage of `v-if` on the same element as `v-for` should be avoid. `v-if` should be on a wrapper if you want conditionally display or not the full list. If you conditionally want to select a specific HTML part **amongs** several possibilities, you should be use `v-if` into several child elements case. If you use `v-if` for allows only one case to be displayed, it is a usage of `v-if` as a filter, and this case should be doing with a computed property.

{% raw %}
<details>
<summary>
  <h4>Detailed Explanation</h4>
</summary>
{% endraw %}

If you want to decide to display or not a list, you should not place the `v-if` on the same item of `v-for` because in this case the test will be done for « each » item in the loop. So prefer do this:

``html
<ul v-if="listIsDisplayed">
  <li v-for="item in items" :key="item.id">
    {{ item.content }}
  </li>
</ul>
``

If you want conditionally select what you will display for each item, the usage of `v-if` is better in a child elements. See below:

``html
<div v-for="item in items" :key="item.id">
  <h1 v-if="item.type === 'title'">{{ item.content }}</h1>
  <h2 v-else-if="item.type === 'subtitle'">{{ item.content }}</h2>
  <p v-else-if="item.type === 'paragraph'">{{ item.content }}</p>
  <div v-else>{{ item.content }}</div>
</div>
``

And if you want only select some items from a list, use a computed property as below.

{% raw %}<div class="style-example example-bad">{% endraw %}
#### Bad

``js
{
  data: function () {
    return {
      items: [
        {
          id: 0,
          content: 'White Player 1'
        },
        {
          id: 1,
          content: 'Black Player 1'
        },
        {
          id: 2,
          content: 'White Player 2'
        },
        {
          id: 3,
          content: 'Black Player 2'
        }
        // A very long list ...
      ]
    }
  }
}
``

``html
<ul class="black-player">
  <li v-for="(item, index) in oddItems" v-if="index % 2" :key="item.id">
    {{ item.content }}
  </li>
</ul>
``

{% raw %}</div>{% endraw %}

{% raw %}<div class="style-example example-good">{% endraw %}
#### Good

``js
{
  data: function () {
    return {
      items: [
        {
          id: 0,
          content: 'White Player 1'
        },
        {
          id: 1,
          content: 'Black Player 1'
        },
        {
          id: 2,
          content: 'White Player 2'
        },
        {
          id: 3,
          content: 'Black Player 2'
        }
        // A very long list ...
      ]
    }
  },
  computed: {
    oddItems: function () {
      return items.filter(function (item, index) {
        return index % 2
      });
    }
  }
}
``

``html
<ul class="black-player">
  <li v-for="item in oddItems" :key="item.id">
    {{ item.content }}
  </li>
</ul>
``
{% raw %}</div>{% endraw %}

[chrisvfritz]

I think the title has a mistake (v-bind instead of v-if) and I'd put it in strongly recommended, since it won't cause an error, but could potentially be confusing and will always be less efficient than a computed property. For title, maybe:

Avoid `v-if` on same element as `v-for`

That way, it doesn't sound like we're strongly recommending that they do go on the same element. 😄 For other comments and tweaks, I think it will be easier to collaborate on a pull request, so that I can attach comments to specific lines and push up changes to tweak language.

How does that sound?

[MachinisteWeb]

Thx, I corrected title. I will push that in Pull Request