Vue中如何在v-if中正确访问嵌套子数组数据？

没问题，我来帮你捋清楚这个Vue模板里的判断逻辑~

你想要的核心需求是：根据当前message的categories数组中的name值，判断是否匹配tag（或者tag为空时直接显示），从而决定是否渲染对应的.post元素。

先说说你的临时解决方案 #

你自己写的这个临时方案其实思路是完全正确的：

<template v-for="message in messages">
 <div class='post' v-if='message.categories.map(c => c.name).includes(tag) || tag === ""'>
 <h2>{{message.text}}</h2>
 <div v-for="category in message.categories">
 {{category.name}}
 </div>
 </div>
</template>

这里通过message.categories.map(c => c.name)把每个分类的name提取成一个数组，再用includes(tag)判断是否包含目标标签，逻辑通顺，完全能实现需求。

更高效优雅的优化方案 #

不过map方法会遍历整个categories数组生成新数组，其实我们可以用some方法来优化——它只要找到第一个匹配的项就会停止遍历，性能更好：

<template v-for="message in messages">
 <div class='post' v-if='message.categories.some(c => c.name === tag) || tag === ""'>
 <h2>{{message.text}}</h2>
 <div v-for="category in message.categories">
 {{category.name}}
 </div>
 </div>
</template>

some方法的作用是检查数组中是否至少有一个元素满足指定条件，刚好贴合我们“判断是否有分类匹配tag”的需求。

进阶：抽成方法提升可维护性 #

如果这个判断逻辑会在多个地方用到，或者你想让模板代码更简洁，可以把判断逻辑抽成组件的方法：

// 组件的script部分
export default {
  // ...其他配置
  methods: {
    doesMessageMatchTag(message, tag) {
      // tag为空时直接返回true，否则检查分类是否匹配
      return tag === "" || message.categories.some(c => c.name === tag);
    }
  }
}

然后在模板里直接调用这个方法：

<template v-for="message in messages">
 <div class='post' v-if='doesMessageMatchTag(message, tag)'>
 <h2>{{message.text}}</h2>
 <div v-for="category in message.categories">
 {{category.name}}
 </div>
 </div>
</template>

这样模板代码会更清晰，后续修改判断逻辑也只要改这个方法就行，维护起来更方便。

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