Laravel + Bootstrap-Vue表不接受数据 [英] Laravel + Bootstrap-Vue Table not accepting data

问题描述

我目前正在使用Laravel Spark，并且正在慢慢学习Vue.js系统.

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

我想在从AWS DynamoDB提取的表中显示一堆数据.我已经以各种方式成功解析了这些数据，并且可以在标准的静态Bootstrap表中显示数据.我现在正在尝试使用Vue.js版本，我一生都无法获得要显示的数据.如果我将虚拟数据插入Vue组件，则虚拟数据会显示出来，因此它一定是我传递数据的方式.

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.

我的代码如下:

TableController.php

TableController.php

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

table.blade.php

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

MyTable.vue

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

<script>

    export default {

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

我在这里做错了什么?我尝试过各种格式的数据格式化.JSON，手动，数组...什么都行不通.所以这一定是我传递它的方式.

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 :)

推荐答案

您必须使用 props 才能将属性传递给Vue的组件.

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

MyTable.vue

MyTable.vue

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

然后您可以将数据传递到组件:

Then you can pass data to component:

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

这篇关于Laravel + Bootstrap-Vue表不接受数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！