Vue how to properly use v-for and v-if together?

Question

Vue.js

There is a layout:

<template v-if="!model.isFreeTime">
          <el-checkbox-group v-model="model.times">
            <el-checkbox-button :label="item.value" :key="item.value" :disabled="item.disabled" v-if="this.model.selectedTime == item.extraDate">{{item.label}}</el-checkbox-button>
          </el-checkbox-group>
        </template>

How to "make friends" v-for and v-if here?
v-if checks two values ​​from the model, and if they are equal, then the element is displayed
v-for iterates over the array and displays values ​​from it

Answer 1

As an option not to create a new html element

<template v-if="">
  <div v-for="" />
</template>

Answer 2

correctly "make friends" v-for and v-if

To make v-for and v-if friends, civilized people usually first filter the array, and then give it to render.

Answer 3

The vue documentation answers .
In short: do not hang these two elements on one element, spread them to different levels.