dancefinder-app/components/pages/events/Event/index.vue

<template>
  <v-card xs12>
    <v-card-title primary-title>
      <h3 class="headline mb-0"><a href="#" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.band.name}}</h3>
    </v-card-title>
    <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6><strong>Datum:</strong> {{event.date}}</v-flex>
        <v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12 sm6 md3><strong>Var:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.name}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Ort:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.city}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.municipality}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.state}}</v-flex>
      </v-layout>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    props: {
      event: {
        type: Object,
        required: true
      },
      hasUser: {
        type: Boolean,
        required: true
      },
      ignore: {
        type: Function,
        required: true
      }
    }
  };
</script>