Laravel и vuejs -> как передать данные контроллера в мое представление Vue?

Question

Я одновременно открываю php, laravel, vuejs и думаю, кое-что еще не выздоровело;)

Я создал новый компонент "таблица", который является базовой таблицей, и хотел бы использовать его во многих местах моего приложения, где я бы просто указал его заголовок, столбцы и данные. 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');

Но это не работает и говорит мне: "Свойство или метод не определены в экземпляре, но на него ссылаются во время рендеринга"

Я вообще не справляюсь, и мне неприятно, что у меня есть хороший способ сделать это: я не должен получать свои данные в FootballerController? Если нет, то где мне его взять?

Заранее большое спасибо.

Answer 1

Когда вы используете {{ value }} в обеих средах Blade и javascript одновременно.Вам нужно использовать @{{ value }}, чтобы избежать столкновения между Blade & Vue.

try

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

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)

Теперь кажется, что данные, которые я получаю после моего запроса, не анализируются должным образом, но это другой момент:)