Laravel + Bootstrap-Vue 表不接受数据

Posted 2023-02-23

【中文标题】Laravel + Bootstrap-Vue 表不接受数据

【英文标题】：Laravel + Bootstrap-Vue Table not accepting data

【发布时间】：2018-11-12 20:01:34

【问题描述】：

我目前正在玩 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，手动，数组......没有任何作用。所以这一定是我传递它的方式。

任何见解都会令人惊叹:)

【参考方案1】：

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

MyTable.vue

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

然后就可以向组件传递数据了：

<MyTable :items=" $items ">

【讨论】：

如果不清楚 props 对 Vue 新手来说究竟是什么，文档中的这个页面涵盖了要点：vuejs.org/v2/guide/…

好的，我已经修改了我的代码以包含道具的使用（我尝试失败并错误地认为它是错误的），但仍然无法正常工作。一定是我的数据格式出错了。文档指出该组件接受这样的数据：“items 是数组格式的表数据，其中每个记录（行）数据都是键控对象。”。 PHP 数组和关联数组到 JS 键控对象和数组之间肯定是有区别的，并且彼此不兼容。那我需要转换组件内部的数据吗？

我不知道你的数据是什么样的，但如果 $items 是 laravel 集合，laravel 会为你转换。如果$items 是一个集合，你可以试试:items="!! $items-> toJson() !!"，如果$items 是一个PHP 数组，你可以试试:items=" json_encode($items) "。如果 $items 是一个集合，那么在 vue 中这将是一个数组，如果是关联数组，它将是一个对象。