Question

我正在玩Laravel Spark，我正在慢慢学习Vue.js系统。

我想要在从AWS DynamoDB中提取的表中显示一堆数据。我以各种方式成功解析了这些数据，并可以在标准的静态Bootstrap表中显示数据。我现在正在尝试使用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，手动，数组...没有用。所以它必须是我传递它的方式。

任何见解都会令人惊讶：）

Answer 1

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

MyTable.vue

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

然后您可以将数据传递给组件：

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

Laravel + Bootstrap-Vue表不接受数据

1 个答案: