为什么我无法使用 vue.js 从我的 laravel 数据库中获取数据？

Question

I have the following Problem: I have a table with the names of some companies on a full set up laravel and i want them to be displayed via vue.js i got the following done with a tutorial but it wont work out as it's intended to.我有以下问题：我有一个完整设置 laravel 上的一些公司名称的表格，我希望它们通过 vue.js 显示我通过教程完成了以下操作，但它不会按预期工作。 I just get the Table Header.我刚拿到表 Header。 It has to be solved via the API.它必须通过 API 解决。

Please help:)请帮忙：）

Welcome.vue欢迎.vue

<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3';
import axios from 'axios';

</script>

<template>
    <Head title="Welcome" />

    <div class="body">
        <FirmenListe :firmas = "firmas"></FirmenListe>
    </div>
</template>
<script>
    import FirmenListe from "./FirmenListe.vue"
    export default {
        name: "App",
        components: {
            FirmenListe
        },
        data(){
            return{
                url: "http://localhost:5174/routes/api.php",
                firmas: []
            };
        },
        methods: {
            getFirma(){
                axios.get(this.url).then(data => {
                    this.firmas = data.data;
                })
            }
        },
        created(){
            this.getFirma();
        }
    }
</script>

FirmenListe.vue FirmenListe.vue

<template>
    <div class="firma-liste">
        <div class="data">
            <table class="ui celled table">
                <tr>
                    <th>ID</th>
                    <th>Firmenname</th>
                </tr>
                <body>
                    <tr>
                        <Firmen 
                        v-for="firmas in firmas" 
                        :key="firmas.id" 
                        :firmas="firmas"/>
                    </tr>
                </body>
            </table>
        </div>
    </div>
</template>

<script>
    import Firmen from "./Firmen.vue";
    export default {
        name: "FirmenListe",
        components: {
            Firmen
        },
        props: {
            firmas: {
                type: Array
            }
        }
    }
</script>

Firmen.vue固件.vue

<template>
    <td>{firmas.id}</td>
    <td>{firmas.firmenname}</td>
</template>

<script>
    export default {
        name: "firmas",
        props: {
            firmas: {
                type: Object
            }
        }
    }
</script>

routes/api.php路线/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FirmaController;
use App\Http\Controllers\MitarbeiterController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});
Route::resource('firma', 'FirmaController');
Route::resource('mitarbeiter', 'MitarbeiterController');

Answer 1

You call a wrong route你叫错了路线

try this:尝试这个：

 return{ url: "http://localhost:5174/api/firma", firmas: [] }; },

为什么我无法使用 vue.js 从我的 laravel 数据库中获取数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-14 06:42:08

为什么我无法使用 vue.js 从我的 laravel 数据库中获取数据？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-14 06:42:08

解决方案1
0 已采纳 2022-08-14 06:42:08