Как создать связсь v-for в v-if, не нарушив рекомендации?

Question

[Александр Иванов]

<div class="catalog-section" v-for="category in categories" :key="category.index">
          <h2 class="catalog-section--title title-default">{{category.name}} {{category.id}}</h2>
          <p class="catalog-section--label label-default" v-if="category.label">{{category.label}}</p>
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in posts" v-if="item.category === category.id" :key="item.index">
              <product-item :item=item />
            </div>
          </div>
    </div>

Так работает но VScode ругается, да и хочется соблюсти правила.

Comments

[Eugene Chefranov]

на что именно ошибка? вижу проблему только тут <product-item :item=item /> нет кавычек

[Александр Иванов]

Eugene Chefranov, ошибки нет, но vue не рекомендует так делать `v-for="item in posts" v-if="item.category === category.id"` ищу альтернативу, но помоему в данной ситуации так было было наболее логично несмотря на рекомендации не совмещаь v-if и v-for

[Eugene Chefranov]

cimonlebedev, тогда сделайте дополнительную обертку для v-if

Answer 1

[Артур Карапетян]

<div class="catalog-section" v-for="category in categories" :key="category.index">
          <h2 class="catalog-section--title title-default">{{category.name}} {{category.id}}</h2>
          <p class="catalog-section--label label-default" v-if="category.label">{{category.label}}</p>
          <div class="row">
              <template v-for="item in posts">
                 <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"  v-if="item.category === category.id" :key="item.index">
                    <product-item :item=item />
                 </div>
              </template>
          </div>
    </div>

?

Comments

[Александр Иванов]

Странно, я почему-то думал, v-for нельзя использовать с template ))
Спасибо!

Answer 2

[0xD34F]

Сделайте вычисляемое свойство, где будут все нужные данные - это избавит от необходимости использовать v-if.

Что-то вроде:

categoriesWithPosts() {
  return this.categories.map(n => ({
    ...n,
    posts: this.posts.filter(m => m.category === n.id),
  }));
},

Answer 3

[Антон Антон]

<div class="catalog-section" v-for="category in categories" :key="category.index">
          <h2 class="catalog-section--title title-default">{{category.name}} {{category.id}}</h2>
          <p class="catalog-section--label label-default" v-if="category.label">{{category.label}}</p>
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in posts.filter(item => item.category === category.id)" :key="item.index">
              <product-item :item=item />
            </div>
          </div>
    </div>