mensa/src/components/Mensa.vue

<template>
  <div class="mensa">
    <h2 id="date">{{date}}</h2>
      <div class="meal" v-for="meal in meals">
        <h2>{{meal.category}}
          <img v-if="meal.diet === 'fleischlos'" class="svg-icon" src="../assets/svg/001-food.svg" title="ohne Fleisch" alt="ohne Fleisch">
          <img v-else-if="meal.diet === 'mit Fleisch'" class="svg-icon" src="../assets/svg/002-steak.svg" title="mit Fleisch" alt="mit Fleisch">
          <img v-if="meal.diet === 'mit Fisch/ Meeresfrüchten' || meal.diet === 'MSC zertifiziert'" class="svg-icon" src="../assets/svg/003-fish.svg" title="mit Fisch" alt="mit Fisch">
        </h2>
        <p>{{meal.title}}</p>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'mensa',
  computed: {
    ...mapGetters({
      meals: 'getMeals',
      date: 'getDate'
    })
  }
}
</script>
<style>
.meal {
  margin: 2em 0;
}

.meal > h2 {
  margin-bottom: 0em;
}

.meal > p {
  margin-top: 0.4em;
}

#date {
  margin-bottom: -1em;
}
.mensa {
  margin-bottom: 3em;
}

.svg-icon {
  height: 1em;
  width: 1em;
}
</style>