Vue как правильно использовать v-for и v-if вместе?

Question

[krispeyJAk]

Есть верстка :

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

Как правильно "подружить" v-for и v-if здесь?
v-if проверяет два значения из модели, и если они равны, то выводится элемент
v-for делает перебор массива и выводит из него значения

Comments

[Вадим]

А какие вопросы у Вас остались после прочтения документации?
https://ru.vuejs.org/v2/style-guide/#%D0%98%D0%B7%...

Разве что Вы её не читали.

Answer 1

[InfernoElegy]

Как вариант чтобы не создавать новый html элемент

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

Answer 2

[Михаил]

Отвечает документация по vue

Если кратко: не надо вешать эти два элемента на один элемент, разносите на разные уровни.