VUE列表顺序错乱的问题（template在循环中的使用）

码客说

发布于 2024-01-12 09:29:35

3390

发布于 2024-01-12 09:29:35

文章被收录于专栏：码客码客

前言

页面渲染的和数据不一致，可以从两个方面排查。

看一下vue devtools的数据是否和预期的数据一致，如果不一致则是因为数据对象和之前不是一个对象了。
如果数据也一样，但顺序还不一样，就是渲染的问题。

顺序错乱

下面说一种渲染问题：

如果我们循环生成的是template，而其中的组件都使用v-if，这样渲染出来的顺序就和数据本身的顺序不一样。

错误的方式：

<template v-for="(item, index) in eleProps.children">
  <form-comp-input
    v-if="item.name === 'tpl_comp_input'"
    :key="index"
    class="flex1"
    :ele-props="item"
  />
  <form-comp-textarea
    v-if="item.name === 'tpl_comp_textarea'"
    :key="index"
    class="flex1"
    :ele-props="item"
  />
</template>

解决的方式很简单：

后续的用v-else-if即可。

正确的方式：

<template v-for="(item, index) in eleProps.children">
  <form-comp-input
    v-if="item.name === 'tpl_comp_input'"
    :key="index"
    class="flex1"
    :ele-props="item"
  />
  <form-comp-textarea
    v-else-if="item.name === 'tpl_comp_textarea'"
    :key="index"
    class="flex1"
    :ele-props="item"
  />
</template>

v-for和v-if

v-for和v-if不建议在同一个元素上使用，一般要这样处理的时候，我们可以把v-for放在template上。

使用template的时候，key要绑定在子元素上。

并且如果有多个子元素，不要都用v-if，会导致渲染顺序问题。

下面是使用 <template> 元素包裹 v-if 和 v-for 的示例代码：

<template v-for="(item,index) in items">
  <div v-if="item.condition" :key="index">
    <!-- 根据条件渲染的内容 -->
  </div>
</template>

通过使用 <template> 元素，可以解决 v-if 和 v-for 同时使用时的渲染顺序问题。

v-for 在 <template> 元素上进行迭代，而每次迭代时<div>元素根据条件进行渲染。

这种方式能够保持代码的可读性和维护性，并且不会引起意外的结果。

同时，还可以利用 <template> 元素的特性，避免不必要的 DOM 元素渲染，提升性能。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-11，如有侵权请联系 cloudcommunity@tencent.com 删除

key

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度