title: Reuseable button in vuejs
body: <p>BaseButton.vue is reuseable component event listeners  This can be passed down to an inner component via v-on=&quot;$listeners&quot; that emits function value in the parent is trigger</p>
  <pre><code>   &lt;div&gt;
      &lt;button v-bind=&quot;$attrs&quot; v-on=&quot;$listeners&quot;&gt;
        &lt;slot name=&quot;iconPrepend&quot;&gt;&lt;/slot&gt;
        {{ buttonLabel }}
        &lt;slot name=&quot;iconAppend&quot;&gt;&lt;/slot&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      loading: {
        type: Boolean,
        // default: &quot;&quot;,
      },
      variant: {
        type: String,
        default: &quot;&quot;,
      },
      iconPrepend: {
        type: String,
        default: &quot;&quot;,
      },
      disabled: {
        type: Boolean,
        // default:''
      },
  
      buttonLabel: {
        type: String,
        default: &quot;&quot;,
      },
    },
    methods: {
      // onClick() {
      //   this.$emit(&quot;click&quot;);
      // },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is the newAccountholder.vue file i've imported BaseButton.vue in the newAccountholder.vue file. The BaseButton I've used as save button and next button as when I've clicked on next button is not calling next button but the save button is calling</p>
  <pre><code>       &lt;v-form style=&quot;width: 75%&quot; @submit.prevent=&quot;submit&quot; autocomplete=&quot;off&quot;&gt;
             &lt;v-window v-model=&quot;steps&quot;&gt;
              &lt;v-window-item :value=&quot;0&quot;&gt;
                &lt;v-card-text&gt;
                  &lt;div class=&quot;d-flex align-center mb-4 mt-4&quot;&gt;
                    &lt;v-avatar size=&quot;35&quot; color=&quot;#91CA59&quot; class=&quot;&quot;&gt;
                      &lt;v-icon color=&quot;#ffffff&quot;&gt;mdi-human-greeting&lt;/v-icon&gt;
                    &lt;/v-avatar&gt;
                    &lt;span class=&quot;heading-md px-6&quot;&gt; Personal Informations &lt;/span&gt;
                  &lt;/div&gt;
     
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;First Name&quot;
                        ref=&quot;firstNameFocus&quot;
                        required
                        v-model=&quot;dataFromInputs.first_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Last Name&quot;
                        v-model=&quot;dataFromInputs.last_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;CNIC&quot;
                        v-model=&quot;dataFromInputs.cnic&quot;
                        type=&quot;number&quot;
                        required
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Phone Number&quot;
                        v-model=&quot;dataFromInputs.contact&quot;
                        type=&quot;number&quot;
                        required
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;        
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-autocomplete
                        :items=&quot;genderOptions&quot;
                        v-model=&quot;dataFromInputs.gender&quot;
                        label=&quot;Gender&quot;
                        required
                      &gt;&lt;/v-autocomplete&gt;
                    &lt;/v-col&gt;
                    &lt;v-col sm=&quot;12&quot; md=&quot;4&quot;&gt;
                      &lt;v-file-input
                        v-model=&quot;dataFromInputs.profile&quot;
                        chips
                        label=&quot;Photo&quot;
                        append-icon=&quot;mdi-image&quot;
                        @change=&quot;selectImage&quot;
                        accept=&quot;image/png, image/jpeg, image/bmp&quot;
                      &gt;&lt;/v-file-input&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Current Address&quot;
                        v-model=&quot;dataFromInputs.current_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Permanent Address&quot;
                        v-model=&quot;dataFromInputs.permanent_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-card-text&gt;
              &lt;/v-window-item&gt;
  
              &lt;v-window-item :value=&quot;1&quot;&gt;
                &lt;v-card-text class=&quot;algin-center&quot;&gt;
                  &lt;div class=&quot;d-flex align-center mb-8 mt-4&quot;&gt;
                    &lt;v-avatar size=&quot;35&quot; color=&quot;#91CA59&quot; class=&quot;&quot;&gt;
                      &lt;v-icon color=&quot;#ffffff&quot;&gt;mdi-account-circle &lt;/v-icon&gt;
                    &lt;/v-avatar&gt;
                    &lt;span class=&quot;algin-start heading-md px-6&quot;
                      &gt;Account Information&lt;/span
                    &gt;
                  &lt;/div&gt;
                  &lt;!-- &lt;div class=&quot;d-flex justify-end &quot;&gt; --&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                     
                      &lt;v-text-field
                        label=&quot;A/C No&quot;
                        v-model=&quot;dataFromInputs.acc_no_id&quot;
                        type=&quot;number&quot;
                        required
                        :disabled=&quot;editAccountDetails ? true : false&quot;
                      &gt;&lt;/v-text-field&gt;
                      &lt;!-- &lt;/validation-provider&gt;  --&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                   
                      &lt;v-text-field
                        label=&quot;A/C Balance&quot;
                        v-model=&quot;dataFromInputs.acc_balance&quot;
                        type=&quot;number&quot;
                        required
                        :disabled=&quot;editAccountDetails ? true : false&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-menu
                        ref=&quot;menu2&quot;
                        v-model=&quot;menu2&quot;
                        :close-on-content-click=&quot;false&quot;
                        :return-value.sync=&quot;date2&quot;
                        transition=&quot;scale-transition&quot;
                        offset-y
                        min-width=&quot;auto&quot;
                      &gt;
                        &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                          &lt;v-text-field
                            v-model=&quot;dataFromInputs.opening_date&quot;
                            label=&quot;A/C Opening Date&quot;
                            prepend-icon=&quot;mdi-calendar&quot;
                            v-bind=&quot;attrs&quot;
                            v-on=&quot;on&quot;
                            required
                            :readonly=&quot;disableAndReadonly&quot;
                          &gt;&lt;/v-text-field&gt;
                        &lt;/template&gt;
                        &lt;v-date-picker
                          v-model=&quot;dataFromInputs.opening_date&quot;
                          :max=&quot;new Date().toISOString().substr(0, 10)&quot;
                          @input=&quot;menu2 = false&quot;
                        &gt;&lt;/v-date-picker&gt;
                      &lt;/v-menu&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-card-text&gt;
              &lt;/v-window-item&gt;
  
              &lt;v-window-item :value=&quot;2&quot;&gt;
                &lt;v-card-text&gt;
                  &lt;div class=&quot;d-flex align-center mb-8 mt-4&quot;&gt;
                    &lt;v-avatar size=&quot;35&quot; color=&quot;#91CA59&quot;&gt;
                      &lt;v-icon color=&quot;#ffffff&quot;&gt;mdi-check-circle-outline&lt;/v-icon&gt;
                    &lt;/v-avatar&gt;
                    &lt;span class=&quot;algin-start heading-md px-3&quot;&gt;
                      Confirm Informations
                    &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;v-row&gt;
                    &lt;v-col sm=&quot;12&quot; md=&quot;6&quot;&gt;
                      &lt;v-file-input
                        v-model=&quot;dataFromInputs.signature&quot;
                        chips
                        label=&quot;Signature&quot;
                        accept=&quot;image/*&quot;
                        append-icon=&quot;mdi-signature-image&quot;
                        @change=&quot;selectSignatureFile&quot;
                      &gt;&lt;/v-file-input&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-card-text&gt;
              &lt;/v-window-item&gt;
  
              &lt;v-window-item :value=&quot;3&quot;&gt;
                &lt;v-card-text&gt;
                  &lt;div class=&quot;d-flex align-center mb-8 mt-4&quot;&gt;
                    &lt;v-avatar size=&quot;35&quot; color=&quot;#91CA59&quot;&gt;
                      &lt;v-icon color=&quot;#ffffff&quot;&gt;mdi-check-circle-outline&lt;/v-icon&gt;
                    &lt;/v-avatar&gt;
                    &lt;!-- &lt;v-stepper-content step=&quot;5&quot; color=&quot;light-green&quot;&gt; --&gt;
                    &lt;span class=&quot;heading-md px-4&quot;&gt; Kin (1) Informations &lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;!-- &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-autocomplete
                        :items=&quot;returnAccountHolders&quot;
                        item-text=&quot;first_name&quot;
                        item-value=&quot;id&quot;
                        v-model=&quot;kinInformationObj1.acc_no_id&quot;
                        label=&quot;A/C No&quot;
                        :loading=&quot;slctLoadingOnAcHolders&quot;
                      &gt;&lt;/v-autocomplete&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt; --&gt;
  
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;First Name&quot;
                        v-model=&quot;kinInformationObj1.first_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Last Name&quot;
                        v-model=&quot;kinInformationObj1.last_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;CNIC&quot;
                        v-model=&quot;kinInformationObj1.cnic&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Phone Number&quot;
                        v-model=&quot;kinInformationObj1.contact&quot;
                        type=&quot;number&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot;&gt;
                      &lt;v-autocomplete
                        :items=&quot;genderOptions&quot;
                        label=&quot;Gender&quot;
                        v-model=&quot;kinInformationObj1.gender&quot;
                      &gt;&lt;/v-autocomplete&gt;
                    &lt;/v-col&gt;
                    &lt;v-col sm=&quot;12&quot; md=&quot;4&quot;&gt;
                      &lt;v-file-input
                        v-model=&quot;kinInformationObj1.cnic_img&quot;
                        chips
                        label=&quot;CNIC PHOTO&quot;
                        append-icon=&quot;mdi-image&quot;
                        @change=&quot;selectImage&quot;
                        accept=&quot;image/png, image/jpeg, image/bmp&quot;
                      &gt;&lt;/v-file-input&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;!-- &lt;validation-provider
                          v-slot=&quot;{ errors }&quot;
                          name=&quot;Gender&quot;
                          rules=&quot;required&quot;
                        &gt; --&gt;
                      &lt;v-text-field
                        label=&quot;Current Address&quot;
                        v-model=&quot;kinInformationObj1.current_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      
                      &lt;v-text-field
                        label=&quot;Permanent Address&quot;
                        v-model=&quot;kinInformationObj1.permanent_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-card-text&gt;
                &lt;v-card-text&gt;
                  &lt;div class=&quot;d-flex align-center mb-8 mt-4&quot;&gt;
                    &lt;v-avatar size=&quot;35&quot; color=&quot;#91CA59&quot;&gt;
                      &lt;v-icon color=&quot;#ffffff&quot;&gt;mdi-check-circle-outline&lt;/v-icon&gt;
                    &lt;/v-avatar&gt;
                    &lt;!-- &lt;v-stepper-content step=&quot;5&quot; color=&quot;light-green&quot;&gt; --&gt;
                    &lt;span class=&quot;heading-md px-4&quot;&gt; Kin (2) Informations &lt;/span&gt;
                  &lt;/div&gt;               
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;First Name&quot;
                        v-model=&quot;kinInformationObj2.first_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Last Name&quot;
                        v-model=&quot;kinInformationObj2.last_name&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;CNIC&quot;
                        v-model=&quot;kinInformationObj2.cnic&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;v-text-field
                        label=&quot;Phone Number&quot;
                        v-model=&quot;kinInformationObj2.contact&quot;
                        type=&quot;number&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
  
                    &lt;v-col md=&quot;4&quot; sm=&quot;12&quot;&gt;
                      &lt;v-autocomplete
                        :items=&quot;genderOptions&quot;
                        label=&quot;Gender&quot;
                        v-model=&quot;kinInformationObj2.gender&quot;
                      &gt;&lt;/v-autocomplete&gt;
                    &lt;/v-col&gt;
                    &lt;v-col sm=&quot;12&quot; md=&quot;4&quot;&gt;
                      &lt;v-file-input
                        v-model=&quot;kinInformationObj2.cnic_img&quot;
                        chips
                        label=&quot;CNIC PHOTO&quot;
                        append-icon=&quot;mdi-image&quot;
                        @change=&quot;selectImage&quot;
                        accept=&quot;image/png, image/jpeg, image/bmp&quot;
                      &gt;&lt;/v-file-input&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                  &lt;v-row&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                      &lt;!-- &lt;validation-provider
                          v-slot=&quot;{ errors }&quot;
                          name=&quot;Gender&quot;
                          rules=&quot;required&quot;
                        &gt; --&gt;
                      &lt;v-text-field
                        label=&quot;Current Address&quot;
                        v-model=&quot;kinInformationObj2.current_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                    &lt;v-col md=&quot;6&quot; sm=&quot;12&quot; xs=&quot;12&quot;&gt;
                         &lt;v-text-field
                        label=&quot;Permanent Address&quot;
                        v-model=&quot;kinInformationObj2.permanent_address&quot;
                      &gt;&lt;/v-text-field&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;/v-card-text&gt;
              &lt;/v-window-item&gt;
            &lt;/v-window&gt;
  
            &lt;!-- &lt;v-divider&gt;&lt;/v-divider&gt; --&gt;
  
            &lt;v-card-actions
              :class=&quot;
                steps === 2
                  ? 'd-flex justify-md-center pl-16'
                  : 'd-flex justify-end'
              &quot;
            &gt;
              &lt;v-btn class=&quot;px-2&quot; :disabled=&quot;steps === 0&quot; text @click=&quot;steps--&quot;&gt;
                Back
              &lt;/v-btn&gt;
              &lt;div style=&quot;width: 82px&quot;&gt;
                &lt;base-button v-if=&quot;steps !== 3&quot; buttonLabel=&quot;Next&quot; @click=&quot;nextStep&quot;/&gt; 
              &lt;/div&gt;
  
              &lt;div style=&quot;width: 82px&quot;&gt;
                &lt;base-button v-if=&quot;steps === 3&quot; buttonType=&quot;submit&quot; buttonLabel=&quot;save&quot;/&gt;
              &lt;/div&gt;
             
            &lt;/v-card-actions&gt;
          &lt;/v-form&gt;
         &lt;/template&gt;```
  </code></pre>