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

Posted 2023-02-22

【中文标题】访问 vue.js 模板中的 php 数组

【英文标题】：Access php array inside vue.js template

【发布时间】：2019-07-04 05:13:38

【问题描述】：

我正在尝试学习 Laravel 和 vue.js，但偶然发现了一个问题。我有这个 Laravel 模型，它包含一个 php 方法，该方法从数据库中获取数据并放入对象中，然后放入一个数组中。然后我想在 vue.js 组件中访问这个数组，但我不知道我应该怎么做。

我的 Laravel 模型从数据库中获取数据并放入数组中的对象中

我可以在不使用 vue 的情况下从我的 index.blade.php 中打印出数组，如下所示：

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

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

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

app.js 看起来像这样：

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

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

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

<template>
    <div>
         hostData 
    </div>
</template>

<script>
    export default 
        data()
            return
                hostData: /* MY PHP VARIABLE HERE */
            
        
    
</script>

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

【问题讨论】：

我不会说 vue.js，但 SinglePageApplication 的总体思路是，它 (vuejs) 在需要时通过 api 从服务器获取数据。

好的。也许我应该先用 laravel 设置一个 api，然后用 vue 使用它

【参考方案1】：

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

<template>
    <div>
         hostData 
    </div>
</template>

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

            
        
    
</script>

在刀片模板中通过 host-data 传递您的 $data['hosts'] 道具：

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