use "v-for" and "v-if" on a same <template> tag render strange

This issue has been tracked since 2022-08-17.

Version

2.4.4

Reproduction link

codepen.io

Steps to reproduce

<template>
  <div>
    <template v-for="item in [1, 2, 3, 8]" v-if="flag === 1">{{item}}</template>
    <template v-for="item in [5, 6, 7]" v-else>{{item}}</template>
  </div>
</template>

data: {
  flag: 2
}

What is expected?

render "5 6 7"

What is actually happening?

render "5 6 7 5 6 7 5 6 7 5 6 7"

sodatea wrote this answer on 2022-08-17

https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if
It is strongly discouraged to use v-if and v-for on the same node.
So I don't think this behavior is worth fixing.

More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-03
Star Count 199758
Watcher Count 6095
Fork Count 32874
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date