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

Question

我同时发现了 php、laravel、vuejs，我想有些事情我还没有搞定 ;)

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

以下是现在的工作：

app.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');

footballer.blade.php

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

TableauComponent

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

这有效。

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

FootballerController

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');

但这不起作用，告诉我 "Property or method is not defined on the instance but referenced during render"

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

非常感谢。

Answer 1

您在 blade 中的属性前使用了“:”符号，这意味着 'v-bind' 正如文档所说：VueJS Shorthands。因此，首先，要将字符串分配给道具，您不需要在 'titre'.

之前使用“:”

然后，为了解决您的问题，您可以尝试为您的道具添加一个默认值，例如：

props: {
    rows: {
        default: []
    },
    columns: {
        default: []
    },
    titre: {
        default: ''
    }
}

我没试过，但我认为应该可以。

Answer 2

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

尝试

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

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

您可能需要使用 json_encode 来格式化来自 Laravel 的数据，或者如果您使用 Laravel 5.5^.[=22=，则使用 @json ]

Answer 3

非常感谢，确实是 php 数组到 javascript 数组的问题。

在 php 控制器中，我将数据解析为 json

'gridData' =>json_encode($gridData),

在 php 视图中 footballer.blade.php

<tableau
   titre="{{ $title }}"
   rows="{{ $gridData }}">
</tableau>

在我的 Vue 视图中，我得到了一个数组，并为此更改了代码：

 rows: {
          type: String,
          default: ""
      }

 var rowsArray = JSON.parse(this.rows)

现在我的请求后得到的数据似乎没有被正确解析，但这是另一回事:)

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

Laravel and vuejs -> how to pass Controller data into my Vue view?

laravel

vue.js

laravel-5.2

vuejs2