如何将数组从Laravel控制器传递到Vue.js组件

我想将一个名为

hours

的数组从一个Laravel控制器传递到一个Vue.js组件，但由于某种原因它无法工作。 正如您在下面的代码中所看到的，我试图在位于组件内部的select中动态创建选项，但由于某些原因，我在该数组中看不到任何选项。 在视图中，我创建了一个

来检查控制器返回的数组是否正确，最后检查是否正确，因为在视图中，我可以看到数组的第二个值。 但由于某些原因，我无法在组件中可视化数组的值

这是我的控制器代码：

    $open_at = '00:00';
    $close_at = '23:45';

    $time = new DateTime($open_at);
    $close = new DateTime($close_at);
    while ($time < $close) {
        $hours[] = $time->format('H:i');
        $time->modify('+15 minutes');
    }

    return view('create')->with('hours', $hours);

我在控制台中看到以下警告：

Property or method "hours" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

---

可以提供帮助吗？

道具属性的定义与向组件传递$hours的名称不匹配

props: ['hours'],

同样，您在控制器中构建小时数[]的方式没有

id

，因此当您尝试

：key=“hour.id

您必须在controller中构造小时数组，使其每个条目都有一个id，或者（不推荐）可以使用v-for循环中的索引作为键

<div class="form-group">
    <label for="start">Start Hour:</label>
    <select class="form-control" id="start">
        <option v-for="(hour, index) in hours" :key="index">
            {{ hour }}
        </option>
    </select>
</div>

开始时间：
{{小时}

PHP数组和对象可以通过json编码作为道具传递给javascript/vue

    //Using the blade helper @json
    <div id="app">
        <create-form :hours='@json($hours)'></create-form>
    </div>

   //OR using json_encode()

    <div id="app">
        <create-form :hours="{{ json_encode($hours) }}"></create-form>
    </div>

//使用blade helper@json
//或者使用json_encode（）

donkarnash使用代码段并添加json_encode（）它是有效的。顺便问一下，你为什么建议我不要使用你的代码段？不，我并不是建议你不要使用代码段。Vue文档提到不建议在v-for循环中使用循环索引as:key，因为当有多个组件在同一页上使用循环索引作为键时，可能会有一些副作用/不可预测的行为因此，如果可能的话，总是在被迭代的对象上使用一个惟一的属性：key。也就是说，使用循环索引并不少见。

props: ['hours'],

<div class="form-group">
    <label for="start">Start Hour:</label>
    <select class="form-control" id="start">
        <option v-for="(hour, index) in hours" :key="index">
            {{ hour }}
        </option>
    </select>
</div>

    //Using the blade helper @json
    <div id="app">
        <create-form :hours='@json($hours)'></create-form>
    </div>

   //OR using json_encode()

    <div id="app">
        <create-form :hours="{{ json_encode($hours) }}"></create-form>
    </div>