Laravel + Bootstrap-Vue Table не принимает данные - PullRequest
Новая
       11

Laravel + Bootstrap-Vue Table не принимает данные

0 голосов
/ 03 июня 2018

Я сейчас играю с Laravel Spark и медленно изучаю систему Vue.js.

У меня есть куча данных, которые я хочу отобразить в таблице, полученной из AWS DynamoDB.Я успешно анализирую эти данные разными способами и могу отображать данные в стандартной статической таблице начальной загрузки.Сейчас я пытаюсь использовать версию Vue.js, и я не могу всю жизнь получить эти данные для отображения вообще.Если я вставляю фиктивные данные в компонент Vue, фиктивные данные отображаются, поэтому я должен передавать данные таким же образом.

Мой код выглядит следующим образом:

TableController.php 

public function show()
{
    $data = $this->fetchAWSData($condition);    // This is my separate AWS method
    return view('table')->with('items', $data);
}

table.blade.php 

@extends('spark::layouts.app')

@section('content')
<home :user="user" inline-template>

<div class="container-fluid" style="text-align: left">

    <h1>Data</h1>

    <MyTable items={{ $items }}></MyTable>

</div>

</home>
@endsection

MyTable.vue 

<template>
    <b-table striped hover :items=items></b-table>
</template>

<script>

    export default {

        data() {
            return {
                items: this.items
            }
        }
    }
</script>

Что я здесь не так делаю?Я пытался форматировать свои данные всевозможными способами;JSON, вручную, Arrays ... ничего не работает.Так что, должно быть, так я и передаю.

Любое понимание будет УДИВИТЕЛЬНЫМ:)

1 Ответ

0 голосов
/ 03 июня 2018

Вы должны использовать props, чтобы иметь возможность передавать атрибуты компонентам Vue.

MyTable.vue 

...
<script>
  export default {
    props: ['items'],
  }
</script>

Затем вы можете передавать данные компоненту: 

<MyTable :items="{{ $items }}">
...