How to create a v-for link in a v-if without violating the guidelines?

Question

Vue.js

<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>

So it works, but VScode swears, and I want to follow the rules.

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>

?