Petite-Vue中循环数组时条件渲染<li>元素的报错与实现方案咨询

在Petite-Vue里尝试在带v-for的<template>标签内用v-if条件渲染<li>元素时，会触发报错：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')

无法正常运行的代码示例：

<ul>
      <template v-for="item in ['a', 'b', 'c']">
           <li v-if="['a', 'b'].includes(item)">{{ item }} is included in ['a', 'b']<p></p></li>
           <li v-if="['a', 'b'].includes(item)"><hr/></li>
           <li v-if="item === 'c'"><p> item is c</p></li>
      </template>
</ul>

而将元素放在非列表容器（比如<div>）内时，代码能正常运行：

<div>
      <template v-for="item in ['a', 'b', 'c']">
           <p v-if="['a', 'b'].includes(item)">{{ item }} is included in ['a', 'b']</p>
           <hr v-if="['a', 'b'].includes(item)" />
           <p v-if="item === 'c'"> item is c</p>
      </template>
</div>

以下是几种可行的解决方法，实现根据迭代项条件渲染数量可变的<li>元素：

解决方案 #

方法1：给<template>的v-for添加key（核心修复） #

Petite-Vue处理列表内的<template v-for>时，需要明确指定key属性跟踪元素身份，避免DOM操作时出现空引用错误。修改代码如下：

<ul>
      <template v-for="item in ['a', 'b', 'c']" :key="item">
           <li v-if="['a', 'b'].includes(item)">{{ item }} is included in ['a', 'b']<p></p></li>
           <li v-if="['a', 'b'].includes(item)"><hr/></li>
           <li v-if="item === 'c'"><p> item is c</p></li>
      </template>
</ul>

添加:key="item"后，Petite-Vue能正确识别每个迭代块，解决DOM操作时找不到父元素的问题。

方法2：提前处理数据生成目标数组 #

在逻辑层提前处理数据，生成符合需求的<li>内容数组，再直接渲染：

<ul>
  <li v-for="(content, index) in processedItems" :key="index" v-html="content"></li>
</ul>

对应的Petite-Vue逻辑：

PetiteVue.createApp({
  data() {
    return {
      items: ['a', 'b', 'c']
    }
  },
  computed: {
    processedItems() {
      const result = []
      this.items.forEach(item => {
        if (['a', 'b'].includes(item)) {
          result.push(`${item} is included in ['a', 'b']<p></p>`)
          result.push('<hr/>')
        } else if (item === 'c') {
          result.push('<p> item is c</p>')
        }
      })
      return result
    }
  }
}).mount('ul')

这种方式把条件判断移到计算属性中，直接生成待渲染的内容数组，避免模板内复杂的条件嵌套。

方法3：用单个

包裹同项内容 #

如果允许结构调整，可以把同一迭代项的相关内容放在单个<li>内，再做条件判断：

<ul>
  <li v-for="item in ['a', 'b', 'c']" :key="item">
    <template v-if="['a', 'b'].includes(item)">
      {{ item }} is included in ['a', 'b']<p></p>
      <hr/>
    </template>
    <template v-if="item === 'c'">
      <p> item is c</p>
    </template>
  </li>
</ul>

这种方式结构更清晰，同时避免了模板v-for的DOM操作异常。

内容的提问来源于stack exchange，提问作者Radu Raileanu