Laravel 和 vuejs -> 如何将控制器数据传递到我的 Vue 视图中？

Question

我同时发现了 php、laravel、vuejs，我想有些事情我还没有好起来；)

我制作了一个新组件“tableau”，它是一个基本表格，并希望在我的应用程序的许多地方使用它，我只需要指定它的标题、列和数据。FootballerController 是我获取所有数据的地方。

这是现在的工作：

应用程序.js

const tableau = new Vue({
    components:{tableau:Tableau
   },
   data: function() {
        return  {
            title: "the best footballers",
            searchQuery: '',
            gridColumns: ['footballer', 'cote', 'nationalite'],
            gridData: [
                { footballer: 'Remond', cote: 951, nationalite:'USA' },
                { footballer: 'Marcel', cote: 935, nationalite:'ESP' },
                { footballer: 'Stian', cote: 923, nationalite:'NOR' },
                { footballer: 'Martin', cote: 923, nationalite:'USA' },
                { footballer: 'Pierre', cote: 918, nationalite:'ESP' },
            ]
        }
   }
}).$mount('#tableau');

足球运动员.blade.php

<tableau
    v-bind:titre="title"
    :rows="gridData"
    :columns="gridColumns "
    :filter-key="searchQuery" >
  </tableau>

表组件

<template>
    <div >
       <h1 >{{titre}}</h1>
       <table >
            <thead>
            <tr>
                <th v-for="key in columns"
                    {{ key | capitalize }}
                </th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="entry in rows">
                    <td v-for="key in columns">
                    {{entry[key]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script>
export default {
    name:'tableau',
    props: {
        rows: Array,
        columns: Array,
        titre: String
  }
}
</script>

这有效。

然后，这就是我想要的：能够将控制器中的值放入使用 TableauComponent.vue 的 Footballer.blade.php

足球运动员控制器

public function footballer($id){
    //process to get all this data in DB ($footballer, $gridData, $gridColumns, $title)
$footballer= (Footballer::select(SOME REQUEST)->where('id', '=', $id)->get())[0];

        return view('footballers/footballer', ['footballer' => $footballer,
        'gridData' => $gridData,
        'gridColumns' =>  $gridColumns,
        'title' => $title] );
    }

在Footballer.blade.php 中

  <tableau
    v-bind:titre="{{ $title }}"
    :rows="{{ $gridData }}"
    :columns="{{ $gridColumns }}" >
  </tableau>

然后在app.js 中我不再需要数据

const tableau = new Vue({
    components:{tableau:Tableau
   }
}).$mount('#tableau');

但这不起作用并告诉我“属性或方法未在实例上定义，但在渲染期间被引用”

我根本不管理，而且很累，我有好的方法：我不应该在 FootballerController 中获取我的数据吗？如果没有，那我在哪里可以得到它？

非常感谢。

Answer 1

当您{{ value }}同时在 Blade 和 javascript 框架中使用时。您需要使用@{{ value }}以避免 Blade 和 Vue 之间发生冲突。

尝试

<tableau
  v-bind:titre="@{{ $title }}"
  :rows="@{{ $gridData }}"
  :columns="@{{ $gridColumns }}" >
</tableau>

除此之外，当您使用 时:rows="value"，value必须是 javascript 语法，否则当 时rows="value"，value将被视为string。

您可能需要使用json_encode来格式化来自 Laravel 的数据，或者@json如果您使用的是 Laravel 5.5^ ，则使用。