Nuxt.js 循环渲染 blog-grid 子组件时 item prop 无法正常传递问题排查

核心根因 #

模板内的渲染指令被错误添加了v-bind的冒号前缀，导致Vue无法识别内置指令：

• 原本应该写的内置条件渲染指令v-if、循环渲染指令v-for，被写成了带冒号的:v-if、:v-for
• 这种写法不会被Vue识别为内置指令，反而会被当成给组件传递名为v-if、v-for的自定义属性
• 内置的循环、条件渲染逻辑完全没有生效，组件接收到的itemprop自然是未定义状态，触发Nuxt的prop校验报错

错误与正确写法对比 #

触发异常的错误写法 #

<!-- 错误写法：给内置指令加了多余的冒号前缀 -->
<blog-grid :v-if="blogsList.length>0" :v-for="item in blogsList" :item="item"></blog-grid>

可正常运行的正确写法 #

<!-- 正确写法：内置指令直接书写，不要加v-bind冒号前缀；v-for需补充对应key值 -->
<blog-grid 
  v-if="blogsList.length > 0" 
  v-for="item in blogsList" 
  :key="item.id"
  :item="item"
></blog-grid>

对应测试现象的解释 #

• 将循环遍历的变量名改为index时页面报错，本质是错误写法下根本没有进入循环上下文，全局不存在叫index的变量引用，触发未定义报错
• 单独传单条博客数据、移除循环逻辑时组件可正常接收prop，是因为此时绕开了错误识别的伪指令场景，传参链路回归正常
• 因为数组本身结构没有异常，所以在页面created生命周期打印blogsList数据完全正常，不会触发数据加载层面的报错

注意：v-for和v-if同时使用时，Vue会优先执行v-for循环逻辑，若需要按条件渲染列表，建议在外层包一层template标签做条件判断，避免指令优先级带来的逻辑问题

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