reservation.ck.si/src/views/Reservation.vue

<template>
  <div class="qrview" >
    <VueQRCodeComponent
      v-if="!status || (status && status.valid)"
      class="qrcode"
      :text="token"
      color="#fff"
      bg-color="#000"
    />
    <div v-if="status && status.valid && status.anzeigename">
      {{status.anzeigename}}
    </div>
    <div v-if="status && !status.valid && status.reason">
      reservation {{ token }} from {{status.anzeigename}} is not valid<br>
      reason: {{status.reason }}
    </div>

  </div>
</template>

<script>
import VueQRCodeComponent from 'vue-qrcode-component' 
export default {
  components: {
    VueQRCodeComponent
  },
  data() {
    return {
      status: null
    }
  },
  computed: {
    token () {
      return this.$route.params.token 
    }
  },
  methods: {
    async getStatus () {
      const response = await fetch(`${process.env.VUE_APP_API_URL}guest/${this.token}`)
      const data = await response.json()
      this.status = data
    }
  },
  mounted () {
    this.getStatus()
  },
}
</script>

<style>
.qrview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  mix-blend-mode: difference;
}
.qrcode > img{
  /* padding: 100px; */
  /* background-color: #fff;  */
  display: inline-flex;
  width: 400px;
  max-width: 80%;
  margin: 10%;
}
</style>