nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Mostrar lista de categorias de productos

This commit is contained in:
nat 2022-01-11 18:45:00 -03:00
parent 4d3209e11b
commit 2c2b921919
5 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/app.js vendored
View File

@ -1,5 +1,3 @@
window.Event = new Vue();
Vue.component('nav-bar', {
template: `
<nav class="navbar" role="navigation" aria-label="main navigation">

66
public/js/productos.js vendored Normal file
View File

@ -0,0 +1,66 @@
Vue.component('categorias-container', {
template: `
<div class="container">
<div class="columns is-multiline is-mobile">
<div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div class="card" style="height:100%">
<div class="card-content">
<div class="media">
<div class="media-content" style="overflow:hidden">
<p class="title is-6" v-text="catego"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`,
data() {
return {
categorias: null
}
},
mounted() {
axios.get("/api/categorias").then(response => {
this.categorias = response.data;
});
}
});
Vue.component('productos-container', {
template: `
<div class="productos-container">
<div v-for="producto in productos" class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
</div>`,
data() {
return {
productos: null
}
},
mounted() {
axios.get("/api/productos").then(response => this.productos = response.data);
}
});

1
resources/views/layouts/app.blade.php
View File

@ -35,6 +35,7 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@yield('scripts')
</body>
</html>

24
resources/views/productos.blade.php
View File

@ -1,23 +1,9 @@
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
</div>
</div>
<categorias-container></categorias-container>
@endsection
@section('scripts')
<script src="{{ asset('js/productos.js') }}"></script>
@endsection

1
resources/views/subpedidos_create.blade.php
View File

@ -37,6 +37,5 @@
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="{{ asset('js/subpedidos-create.js') }}"></script>
@endsection