Question

我正在尝试学习Laravel和vue.js，并upon之以鼻。我有这个Laravel模型，其中包含一个php方法，该方法从数据库中获取数据并放入对象中，然后将该对象放入数组中。然后，我想在vue.js组件中访问此数组，但是我不知道该怎么做。

我的Laravel模型从数据库中获取数据并将其放入数组中的对象
我可以像这样从我的index.blade.php中打印出数组，而无需使用vue：
```
new_cp = [i[:-3] + 'GBP' for i in cp]
```

是否可以通过将其放在index.blade.php中而不是上面的示例中来在vue组件中进行访问？

@foreach ($data['hosts'] as $hostsKey => $hostsValue)
    <ul>
        @foreach ($hostsValue as $hostKey => $hostValue)
            <li>{!!$hostKey!!}: {!!$hostValue!!}</li>  
        @endforeach   
    </ul>
@endforeach

app.js看起来像这样：

<div id="app">
    <hosts></hosts>
</div>

和我的host.vue看起来像这样：

Vue.component('host', require('./components/host.vue').default);

const app = new Vue({
    el: '#app'
});

今天开始尝试Vue，所以请不要对我太刻薄。

Answer 1

您可以修改组件以接收数组作为道具，例如：

<template>
    <div>
        {{ hostData }}
    </div>
</template>

<script>
    export default {
       props:['hostData'],
        data(){
            return{

            }
        }
    }
</script>

刀片服务器模板中的$data['hosts']通过host-data道具：


<div id="app">
    <host :host-data="{{ json_encode($data['hosts']) }}"></host>
</div>

在vue.js模板中访问php数组

1 个答案: