Exercice 2

router/routes.js

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: 'hello', component: () => import('pages/Hello.vue') },
      { path: 'ex1', component: () => import('pages/Exercice1.vue') },
      { path: 'ex2', component: () => import('pages/Exercice2.vue') }
    ]
  }
]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

components/Plat.vue

<template>
  <div class="card shadow-1">
    <img :src="plat.image" width="198" height="180">
    <div class="card-content">
      <h1 class="text-primary">{{ plat.nom }}</h1>
      <p>{{ plat.description }}</p>
      <p>
        <small>
          <b>Note:</b>
        </small>
        <b class="text-primary">
          {{ plat.note }}/5
        </b>
      </p>
      <q-btn @click="$emit('supprimer', plat.id)"
             class="full-width q-ma-md"
             color="secondary"
             icon="delete"
             label="Supprimer"></q-btn>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      plat: {
        type: Object,
        required: true
      },
    },
  }
</script>

<style scoped>
  .card {
    flex-basis: 210px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .card img {
    max-width: 100%;
  }
  .card-content {
    padding: 0 10px;
  }
  h1 {
    font-size: 23px;
  }
  p {
    font-size: 14px;
  }
</style>

pages/Exercice2.vue

<template>
  <q-page padding>
    <div class="q-pa-md row items-stretch">

      <plat v-for="plat in plats"
            :key="plat.id"
            :plat="plat"
            v-on:supprimer="supprimerPlat"
      ></plat>

    </div>
  </q-page>
</template>

<script>
  export default {
    components: {
      'plat' : require('components/Plat.vue').default
    },
    data() {
      return {
        plats: [
          {
            id: 1,
            image : 'https://i.imgur.com/0umadnY.jpg',
            nom : 'Burger',
            description : "Un hamburger est un sandwich composé d'une ou plusieurs tranches de viande hachée, généralement du bœuf, placées dans un petit pain ou une brioche.",
            note : 4,
          },
          {
            id : 2,
            image : 'https://i.imgur.com/b9zDbyb.jpg',
            nom : 'Pizza',
            description : "La pizza est un plat savoureux d'origine italienne, consistant en une base généralement ronde et aplatie de pâte levée à base de blé.",
            note : 5,
          },
          {
            id: 3,
            image : 'https://i.imgur.com/0umadnY.jpg',
            nom : 'Burger',
            description : "Un hamburger est un sandwich composé d'une ou plusieurs tranches de viande hachée, généralement du bœuf, placées dans un petit pain ou une brioche.",
            note : 1,
          },
          {
            id: 4,
            image : 'https://i.imgur.com/xAuhNVg.jpg',
            nom : 'BBQ Ribs',
            description : "Les BBQ ribs ou barbecue ribs sont des grands classiques très appréciés partout dans le monde.",
            note : 5,
          }
        ]
      }
    },
    methods: {
      supprimerPlat(id) {
        this.plats = this.plats.filter(function( plat ) {
          return plat.id !== id;
        });
      }
    },
  }
</script>

PrécédentExercice 1

Mis à jour il y a 2 ans

Ce contenu vous a-t-il été utile ?