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

Question

我同时发现了php，laravel，vuejs，我猜有些东西我还没有好起来;）

我创建了一个新组件“tableau”，这是一个基本的表，并希望在我的应用程序的许多地方使用它，我只需指定它的标题，列和数据。 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>

这有效。

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

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

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

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

非常感谢提前。

Answer 1

当你在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 ^，则使用@json。

Answer 2

您在刀片中的属性之前使用'：'符号，这意味着'v-bind'正如文档所述：VueJS Shorthands。首先，为了将一个String分配给一个道具，你在'titre'之前不需要'：'。

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

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

我没有尝试，但我认为它应该有效。

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)

现在看来我的请求后得到的数据没有被正确解析，但这是另一点:)