Laravel + Bootstrap-Vue Table not accepting data

Question

I'm currently playing with Laravel Spark and I'm slowly learning the Vue.js system.

I have a bunch of data I want to display in a table that is pulled from AWS DynamoDB. I am successfully parsing this data in sorts of ways and can display the data in a standard static Bootstrap table. I'm now trying to use the Vue.js version and I cannot for the life of me get this data to display at all. If I insert dummy data into the Vue Component, the dummy data shows so it must be the way I'm passing the data in.

My code as follows:

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>

What am I doing wrong here? I've tried formatting my data all sorts of ways; JSON, manually, Arrays... nothing works. So it must be the way I'm passing it in.

Any insight would be AMAZING :)

Mirceac21 · Accepted Answer · 2018-06-03 12:58:16Z

1

You have to use props to be able to pass attributes to Vue's components.

MyTable.vue

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

Then you can pass data to component:

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

answered Jun 3, 2018 at 12:58

Mirceac21

1,76617 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave S Over a year ago

In case it's not clear what exactly props is for others new to Vue, this page in the docs covers the essentials: vuejs.org/v2/guide/…

Chris Over a year ago

Ok, I have modified my code to include the use of props (which I tried unsuccessfully and erroneously assumed it was wrong), however still not working. It must be the format of my data that is tripping it up. The docs note the component accepts data like this: "items is the table data in array format, where each record (row) data are keyed objects.". There must be a difference between PHP arrays and associative arrays to JS keyed objects and arrays and are incompatible with one another. Will I need to convert the data inside the component then?

Mirceac21 Over a year ago

I don't know how your data looks like but if $items is laravel collection, laravel will convert that for you. You can try :items="{!! $items-> toJson() !!}" if $items is a collection or :items="{{ json_encode($items) }}" if $items is an PHP array. If $items is a collection then in vue this will be an array if is associative array it will be an object.

Collectives™ on Stack Overflow

Laravel + Bootstrap-Vue Table not accepting data

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related