Laravel + Bootstrap-Vue Table not accepting data

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 🙂

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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 }}">


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x