code for showing the genrated concert ticket.

updated-concert-ticket-index.vue

<template>
  <div class="bg-washed-blue vh-100 ph3 ph5-ns">
    <header class="tc pv3">
     <!-- Header content -->
    </header>
    <section class="ph5 flex flex-wrap justify-between">
      <div class="w-100 w-50-ns tc tl-ns">
        <div class="mv4 cb">
           <!-- form content -->
        </div>
        <button class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-green ba b--green pointer" @click="handleSubmit">Generate Ticket</button>
      </div>
       <!-- Generated ticket is conditionally rendered-->
      <div class="w-100 w-50-ns pa3">
        <h2 class="calisto fw1 f4-ns f3 underline">Result</h2>
        <div v-if="showConcertTicket" class="mt-10">
          <GeneratedConcertTicket
            :concertName="formData.concertName"
            :artist="formData.artist"
            :publicId="formData.publicId"
          />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  // import ticket images
  export default {
    data() {
      return {
      //data
      showConcertTicket: false,
      }
    },
  methods: {
    selectImage(imageId, publicId) {
     //method code goes here
    },
    //add the method below
    handleSubmit() {
      if (!this.imageId || (this.formData.concertName === ''|| this.formData.artist === '')) {
        this.formData.error = true
      } else {
        this.showConcertTicket = true 
      }
    },
  }
}
</script>