Vue3 v-for渲染列表时按钮文本未按项目动态更新问题

• 你定义的displayNameButton是脱离v-for循环上下文的全局计算属性，所有遍历出来的列表项都共用这同一个返回值，不可能按单个项目展示不同内容。
• 该计算属性内部用Array.find()是在整个项目列表里全局查找第一个wordpress === 'yes'的条目，完全没有和当前循环的单个project对象做关联，逻辑本身就和遍历项无关。
• 你Pinia仓库里的wordpress字段类型不统一，部分条目是布尔值false，部分条目是字符串'yes'，很容易导致判断逻辑失效。

方案1：直接在模板内判断（最简便，无额外逻辑） #

直接删除模板里对displayNameButton的引用，替换为基于当前循环project的判断即可：

<a
  :href="project.link"
  target="_blank"
  class="app__projects__content-btn"
>
  {{ project.wordpress === 'yes' ? 'See Website' : 'See code' }}
</a>

方案2：封装可传参的判断方法（适合逻辑复现场景） #

如果按钮文本判断逻辑需要在多处复用，不要用无参全局计算属性，改为定义接收当前项目参数的普通方法：

// script部分定义
const getProjectButtonText = (currentProject) => {
  return currentProject.wordpress === 'yes' ? 'See Website' : 'See code'
}

模板中循环时传入当前project对象调用：

<a
  :href="project.link"
  target="_blank"
  class="app__projects__content-btn"
>
  {{ getProjectButtonText(project) }}
</a>

• 统一Pinia中wordpress字段的数据类型，不要混用布尔值和字符串，推荐全部使用布尔值（true/false），判断逻辑可以简化为{{ project.wordpress ? 'See Website' : 'See code' }}，减少类型判断出错的概率。
• 原有的无参displayNameButton计算属性可以直接删除，它的逻辑和你要实现的按单个项目展示按钮文本的需求完全不匹配。

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