Vue的v-if和v-for放在同一个HTML元素里的坑

文章目录

环境
背景
简化
问题
分析
解决办法
其它

环境

Ubuntu 24.04
Firefox 147.0.4 (64-bit)
Vue 2.7.16
Vue 3.5.30

背景

看下面的uni-app代码：

html 复制代码

<view v-if="ifMergeTemplate == 0" v-for="(item, i) in thMap" ......>{{ item.title }}</view>
<view v-if="ifMergeTemplate != 0" v-for="(item, i) in thMapForMerge" ......>{{ item.title }}</view>

这两行代码里，判断条件是互斥的，所以我看到代码后，随手就把第二行的 v-if="ifMergeTemplate != 0" 改成 v-else 了，没想到这一下改出了问题，所以记录下来，以后要注意避免类似的坑。

简化

一个简单页面：已有变量 x ，以及两个数组 mydata1 和 mydata2 ，要求当 x 大于0时，显示 mydata1 的内容，否则，显示 mydata2 的内容。

判断用 v-if 和 v-else ，循环用 v-for 。

问题

Vue2代码如下：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <h1>{{ x }}</h1>
  <div v-if="x>0" v-for="(item, i) in mydata1" :key="item.key">{{ item.key }}: {{ item.value }}</div>
  <div v-else v-for="(item, i) in mydata2" :key="item.key">{{ item.key }}: {{ item.value }}</div>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      x: 1,
      mydata1: [
        {key: 'a', value: 1},
        {key: 'b', value: 2},
        {key: 'c', value: 3}
      ],
      mydata2: [
        {key: 'd', value: 4},
        {key: 'e', value: 5}
      ]
    }
  })
</script>

当 x 的值为1时，页面如下：

看上去一切正常，没什么问题。

现在把 x 的值改为0，则页面如下：

可见， mydata2 的内容被打印了3次！

而且，浏览器的console报错了：

注：报错是因为key重复了，究其根源，还是因为 mydata2 被重复打印了。

分析

看下面的代码：

html 复制代码

    <div v-if="x>0" v-for="(item, i) in mydata1" :key="item.key">{{ item.key }}: {{ item.value }}</div>
    <div v-else v-for="(item, i) in mydata2" :key="item.key">{{ item.key }}: {{ item.value }}</div>

这段代码的本意是：如果 x 大于0，则循环遍历 mydata1 ，输出item的内容。否则循环遍历 mydata2 ，输入item的内容。

然而，因为 v-if / v-else 和 v-for 是放在同一个HTML元素里的，这就涉及到了优先级的问题。如果前者的优先级高，那就没有问题。

但是事实上 ，在Vue2里， v-for 的优先级高于 v-if / v-else 。所以，代码逻辑就变成了：

html 复制代码

  <template v-for="(item, i) in mydata1">
    <div v-if="x>0" :key="item.key">{{ item.key }}: {{ item.value }}</div>
    <template v-else>
      <div v-for="(item, j) in mydata2" :key="item.key">{{ item.key }}: {{ item.value }}</div>
    </template>
  </template>

所以，在 x 大于0时，代码逻辑是OK的，但是当 x 小于等于0时，就会暴露出问题。

解决办法

既然 v-for 的优先级比 v-if / v-else 更高（或者你不确定哪个优先级高），那最好的解决办法就是，不要把二者放在同一个HTML元素里，而是嵌套使用。

html 复制代码

  <template v-if="x>0">
    <div v-for="(item, i) in mydata1" :key="item.key">{{ item.key }}: {{ item.value }}</div>
  </template>
  <template v-else>
    <div v-for="(item, j) in mydata2" :key="item.key">{{ item.key }}: {{ item.value }}</div>
  </template>

这样，代码结构清晰明了，阅读起来不会有误解。

其它

在Vue3里，貌似 v-if / v-else 的优先级高于 v-for ，因此对于"先判断再循环"的需求，可以直接把二者放在同一个HTML元素里：

html 复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <h1>{{ x }}</h1>
  <div v-if="x>0" v-for="(item, i) in mydata1" :key="item.key">{{ item.key }}: {{ item.value }}</div>
  <div v-else v-for="(item, i) in mydata2" :key="item.key">{{ item.key }}: {{ item.value }}</div>
</div>

<script type="text/javascript">
  Vue.createApp({
    data() {
      return {
        x: 0,
        mydata1: [
          { key: 'a', value: 1 },
          { key: 'b', value: 2 },
          { key: 'c', value: 3 }
        ],
        mydata2: [
          { key: 'd', value: 4 },
          { key: 'e', value: 5 }
        ]
      }
    }
  }).mount('#app')
</script>

当然，还是推荐嵌套使用，使得代码清晰明了，消除歧义。