Question

我决定使用Laravel 5.1，vueJS（带有vue-resource）和服务器端的一些文件交互来创建一个小项目。

一切正常但在创建应用程序的过程中，我质疑自己从服务器接收数据的最佳方式是什么。除了以前的解决方案，AJAX，我尝试使用laravel-blade在我的Vue实例的数据对象中编写数据，如下所示：

FileController.php：

ShopifyAPI::Product.all
ShopifyAPI::Product.first
ShopifyAPI::Product.count

files（）函数只是用户模型上的一个简单的belongsToMany（）关系，后台有一个数据透视表。

index.blade.php：

$files = Auth::user()->files;
return view('files.index', compact('files'));

另一个解决方案在我的Vue实例中会是这样的：

new Vue({
  el: '#files',
  data: {
    // pass the data to Vue via PHP so you don't need an AJAX request
    files: {!! $files !!}

  //  ..
}

现在我的问题是我的方法是否有任何缺点，因为在我看来它更好，因为它更少的AJAX交互，这意味着应用程序应该更快（至少在理论上）。

编辑：当然可以简单地用刀片foreach编写它，但我想在vue中进行数据的表示。

Answer 1

您可以使用道具获取数据：

<div id="files" :files="{{ $files }}"></div>

在您的Vue实例中：

new Vue({
    el: "#files",
    props: ['files'],
    data: {
        list: []
    },
    ready: {
        this.list = JSON.parse(this.files)
    }
});

道具选项files由来自$files的{{1}}填充，并在准备好选项后被解析为laravel以在json中使用你可以在vue中使用：

HTML

该列表包含<div v-for="l in list"> @{{ l.name }} @{{ l.last_name }} </div>，其中包含来自json控制器的文件。

Answer 2

您需要props

所以你的元素看起来像：

<div id="#files" :files="{!! $files !!}"></div>

你的Vue：

new Vue({
    el: '#files',
    props: {
        files: {
            type: Object // <- not necessary, you can also have props: ['files']
        }
    }  
});

Laravel＆amp; VueJS变量定义

2 个答案: