Untitled

<template>
<div class="card text-center" style="width: 18rem;">
  <img class="card-img-top" src="/img/card2.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title" v-text='this.title'></h5>
    <h6 class="card-subtitle mb-2 text-muted" v-text='this.category'></h6>
    <p class="card-text" v-html='this.description'></p>
    <a v-bind:href="'/'+this.category+'/'+this.id" class="btn btn-primary">Volle Ansicht</a>
  </div>
</div>
</template>
<script>
    export default {
        props: ['category', 'title', 'category', 'description', 'id']
    }
</script>

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    @include('includes.header')
    <body>
        <div id="app" class="wrapper">
            <nav-component></nav-component>
            <header-component></header-component>
            <header-sidebar-component></header-sidebar-component>
            <div class="container card-container">
            <div class=row>
                    @foreach($sortedData as $data)
                    <div class="col-md-4">
                    <div class="card-group" style="padding-bottom: 2em">
                    <cards id={{$data->id}} title={{$data->title}} category={{$data->category}} description={{$data->description}}></cards>
                    </div>
                    </div>
                    @endforeach
            </div>
            </div>
            @include('includes.footer')
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>