Laravel & VueJS 变量定义答案

【问题标题】：Laravel & VueJS variable definitionLaravel & VueJS 变量定义
【发布时间】：2016-01-06 14:47:38
【问题描述】：

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

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

文件控制器.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 中显示数据。

【问题讨论】：

标签： php json laravel blade vue.js

【解决方案1】：

你需要props

所以你的元素看起来像：

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

还有你的 Vue：

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

【讨论】：

【解决方案2】：

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

<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>

该列表包含 json 以及来自 Laravel 控制器的文件。

【讨论】：