如何在Vue循环迭代中传递HTML标签值至data并对比标题

我来帮你搞定这个需求！你的核心问题是在循环里对比当前用户和上一个用户的标题，同时还要避免变量冲突的问题。咱们一步步来修改：

首先，修正变量冲突的问题 #

你现在的props和data里都定义了title，这会导致Vue报错（因为props的优先级高于data，重名会覆盖预期逻辑），所以先把props里的title删掉，只保留the_category就够了。

方案1：直接在模板中用索引对比（最简单） #

不需要额外维护data变量，直接利用v-for的index参数，对比当前用户和上一个用户的标题：

<template>
  <div>
    <!-- 给v-for加上index参数，方便拿到当前循环的位置 -->
    <div v-for="(user, index) in the_category.users" :key="user.id">
      <h1 :title="user.title">{{ user.title }}</h1>
      <!-- 判断条件：第一个元素直接显示，或者当前标题和上一个不同时显示 -->
      <h3 v-show="index === 0 || user.title !== the_category.users[index - 1].title">This is a new title</h3>
    </div>
  </div>
</template>

<script>
export default {
  props: [ "the_category" ], // 移除了多余的title props
  data() {
    return {
      // 这里不需要额外定义category变量，直接用props的the_category即可，避免冗余
    };
  },
}
</script>

方案2：用computed预处理列表（更优雅，适合复杂场景） #

如果你的逻辑以后可能扩展，比如还要处理其他标题相关的逻辑，建议用computed属性给每个用户添加一个isNewTitle标记，这样模板里的逻辑会更清晰：

<template>
  <div>
    <div v-for="user in processedUsers" :key="user.id">
      <h1 :title="user.title">{{ user.title }}</h1>
      <h3 v-show="user.isNewTitle">This is a new title</h3>
    </div>
  </div>
</template>

<script>
export default {
  props: [ "the_category" ],
  computed: {
    processedUsers() {
      return this.the_category.users.map((user, index) => {
        // 复制原user对象，避免修改原数据
        const newUser = { ...user };
        // 第一个用户直接标记为新标题
        if (index === 0) {
          newUser.isNewTitle = true;
        } else {
          // 对比当前用户和上一个用户的标题
          newUser.isNewTitle = user.title !== this.the_category.users[index - 1].title;
        }
        return newUser;
      });
    }
  }
}
</script>

为什么你的原代码没生效？ #

1. props和data的title重名，导致data里的title被props覆盖，无法正常跟踪上一个标题；
2. 你只是把user.title和空的title变量对比，没有真正拿到上一个用户的标题，逻辑不成立。

这样修改后就能完美实现你要的效果啦！

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