Laravel & VueJS 变量定义

Posted 2023-02-22

【中文标题】Laravel & VueJS 变量定义

【英文标题】：Laravel & VueJS variable definition

【发布时间】：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 中显示数据。

【参考方案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 控制器的文件。