如何將數組從 Laravel controller 傳遞到 Vue.js 組件

Question

我想將一個名為hours的數組從 Laravel controller 傳遞給 Vue.js 組件，但由於某種原因它不起作用。 正如您在以下代碼中看到的那樣，我正在嘗試在位於組件內部的 select 中動態創建選項，但由於某些原因，我在該數組中看不到任何選項。 在視圖中，我創建了一個<p>來檢查從 controller 返回的數組是否正確，最后它是正確的，因為在視圖中我能夠看到數組的第二個值。 但由於某些原因，我無法可視化組件內數組的值。

這是我的 controller 代碼：

    $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);

這是我的視圖代碼：

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="app">
        <create-form :hours="hours"></create-form>
    </div>
    <p>
        {{ $hours[1] }}
    </p>
</div>
@endsection

這是模板組件內的代碼：

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

這是我的 export_default：

export default {
    props: ['hours[]'],
    mounted() {
        console.log('Component mounted.');
        this.loadUsers();
        this.loadRooms();
    },
    data: function() {
        return {
            users: [],
            rooms: []
        }
    },
    methods: {
        loadUsers: function() {
            axios.get('api/users')
            .then((response) => {
                this.users = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.log(error);
            });
        },
        loadRooms: function() {
            axios.get('api/rooms')
            .then((response) => {
                this.rooms = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.log(error);
            });
        }
    }
}

我在控制台中可視化以下警告：

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.

可以幫忙？

Answer 1

您的 props 屬性的定義與 $hours 傳遞給組件的名稱不匹配

props: ['hours'],

同樣，您在id中構建 hours[] 的方式沒有小時數，因此當您嘗試時模板會給出另一個錯誤: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 arrays 和對象可以通過 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>