VueJS组件通过v-repeat传递props后内容为空的问题

看起来你遇到的问题是Blade传递的$plans没有正确被Vue组件接收到，我来帮你一步步排查和解决：

1. 修复Blade中props的传递方式 #

你当前用的:workouts="{!! json_encode($plans) !!}"可能存在JSON转义或者语法解析的问题，Laravel提供了更安全的@json指令（Laravel 5.5及以上版本支持），它会自动处理JSON的转义，确保Vue能正确解析为JavaScript对象：

<edit-plans :workouts="@json($plans)"></edit-plans>

如果你用的是低于5.5的Laravel版本，需要手动给json_encode加上转义参数，避免引号冲突：

<edit-plans :workouts="{!! json_encode($plans, JSON_HEX_APOS) !!}"></edit-plans>

2. 检查Vue循环指令的兼容性 #

注意v-repeat是Vue 1.x的旧指令，如果你用的是Vue 2.x及以上版本，需要换成v-for，并且要给循环的子组件加上唯一的:key属性：

<template>
  <!-- Vue 2+ 写法 -->
  <workout v-for="plan in workouts" :key="plan.id" :workout="plan"></workout>
</template>

如果确实是Vue 1.x，那v-repeat="workouts"的写法是对的，但要确保子组件workout能正确接收单个plan的数据。

3. 调试确认props是否被正确接收 #

在你的edit.vue组件里添加一个调试钩子，看看实际接收到的workouts是什么：

export default {
  props: ['workouts'],
  created() {
    // 在控制台打印接收的props，方便排查
    console.log('接收到的workouts数据:', this.workouts);
  }
}

打开浏览器控制台，如果打印的是undefined或者空数组，说明Blade那边的传递有问题；如果能看到正确的数组数据，那就是循环指令或者子组件的问题。

4. 确认组件是否被渲染 #

别忘了检查Auth::user()->can('edit-plans')的返回值，如果当前用户没有edit-plans权限，edit-plans组件根本不会被渲染，自然也接收不到任何props。你可以临时注释掉权限判断，测试组件是否能正常接收数据。

按照这几步排查，应该就能解决props为空的问题啦！

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