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

大佬教程收集整理的这篇文章主要介绍了javascript-在vue.js模板中访问php数组，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

>我的Laravel模型从数据库中获取数据并放入数组中的对象
>我可以像这样从我的index.blade.PHP中打印出数组,而无需使用vue：@H_618_4@

@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,所以请不要对我太用力.

解决方法:

您可以@L_262_13@组件以接收数组作为prop,例如：

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

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

            }
        }
    }
</script>

在刀片模板中,通过host-data prop传递$data [‘hosts’]：

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

大佬总结

以上是大佬教程为你收集整理的javascript-在vue.js模板中访问php数组全部内容，希望文章能够帮你解决javascript-在vue.js模板中访问php数组所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。