Question

这是我的刀片服务器代码

<div id="app">
  <Testcomponent bam-wam="ham" />
</div>

这是我的VueJS组件代码

<script>
    export default {
        name: "ExampleComponent",
        props: [
            'bamWam'
        ],
        data () {
            return {

            };
        },
        created() {
            console.log(this.bamWam);
        }
    }
</script>

问题是

此代码运行良好，但是我在问使用Axios和Vuex从我的Laravel应用中获取数据还是像我在此代码中那样简单地传递数据抛出道具 >？

Answer 1

通过道具传递数据是最好的方法。

<my-component my-data="yourData"></my-component>

如果您想对刀片中的数据使用 laravel 变量，

<my-component my-data="'{{ $data.id }}'"></my-component>

<my-component :my-data="'{!! json_encode($data) !!}'"></my-component>

尽可能避免api调用。它将减少对服务器的请求总数，并减少API端点的数量。

Answer 2

如果数据可用于添加组件的视图。然后，将php数组从laravel传递到vue组件的最佳方法是利用json编码，如下所示：

<my-component :needed-data='@json($laravelCollection)'></my-component>

这将使您可以轻松地对Vue控制器中的php数组执行操作，就好像它是一个JS对象一样。请记住，@json必须使用单引号。

对于简单的字符串，您可以直接将其作为道具传递而无需编码。

这种方法比专门为此组件创建新的API更好。

Answer 3

这是唯一对我有用的方法：

<my-component :data="{{ $collection }}"></my-component>

JSON解析的解决方案以HTML打印数据。

将数据从Laravel传递到Vue组件的最佳实践

3 个答案: