Why can i not get the Data from my laravel database with vue.js?-CodePudding

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. I just get the Table Header. It has to be solved via the API.

Please help :)

Welcome.vue

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

</script>

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

    <div >
        <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

<template>
    <div >
        <div >
            <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

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

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

routes/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');

CodePudding user response：

You call a wrong route

try this :

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