Laravel & VueJS变量定义

Question

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

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

FileController.php：

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

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

index.blade.php：

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

  //  ..
}

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

ready: function() {
  this.$http.get('/todos', function (data) {
    this.$set('todos', data);
  }).error(function (data) {
    console.log(data);
  });

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

编辑:当然，例如，可以简单地使用刀片foreach来编写它，但我想用vue来表示数据。

Answer 1

你可以使用props来获取数据：

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

在您的Vue实例中：

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

props选项files由laravel中的$files填充，并被解析为json以在vue中使用，在ready选项之后，您可以在HTML中使用

<div v-for="l in list">
    @{{ l.name }}
    @{{ l.last_name }}
</div>

该列表包含带有来自Laravel控制器的文件的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']
        }
    }  
});