GeneratedBanner.vue

<template>
  <div class="bg-washed-yellow vh-100">
    <header class="tc pv3 pv3-ns">
     <!-- Header content -->
    </header>
    <section class="ph5 flex flex-wrap justify-between">
      <div class="w-100 w-50-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 Banner</button>
      </div>
       <!-- Generated banner is conditionally rendered-->
      <div class="w-100 w-50-ns pa3">
        <h2 class="baskerville fw1 f4-ns f3 underline">Result</h2>
        <div v-if="showBanner" class="mt-10">
          <GeneratedBanner
            :title="formData.title"
            :description="formData.eventDetail"
            :speakers="formData.speaker"
            :publicId="formData.publicId"
          />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  // import banner images
  export default {
    data() {
      return {
      //data
        showBanner: false,
      }
    },
  methods: {
    selectImage(imageId, publicId) {
     //method code goes here
    },
    //add the method below
    handleSubmit() {
      if (!this.imageId || (this.formData.title === ''|| this.formData.speaker === '')) {
        this.formData.error = true
      } else {
        this.showBanner = true 
      }
    },
  }
}
</script>