[Vuejs]-Vue.js Event passthrough triggering 'click' event and named event when I only want the named event

by

0👍

When doing this you have to be careful with the event names chosen. In this case the event name in the schema is the same event name being emitted from the handleSave() method. So what’s happening is the ‘save’ event from VueFormulate is caught in dynamic-form.vue where @save catches it and calls that method. Additionally, the v-on="$listeners" is taking that same re-named click event (i.e. the ‘save’ click event) and passing it through. Now you have a save event containing the click payload as well as a save event contining your form payload from the handleSave() method.

The fix: change the ‘save’ event name in one of the places. I ended up changine the schema click to be more explicit that it’s a click and named it save-click.

// some-form.vue

       <DynamicForm
          class="nested-alt p-10 rounded"
          name="some-form"
          :formSchema="k209Schema"
          :formData="form"
          @submit="handleSubmit"
          @save-click="saveAsDraft($event)"
          @showPreview="handleShowPreview"
          @cancel="handleCancelClick"
        ></DynamicForm>

[
      {
        name: 'preview',
        type: 'button',
        label: 'Preview',
        "input-class": 'btn btn-outline-dark btn-sm',
        '@click': 'showPreview'
      },
      {
        name: 'cancel',
        type: 'button',
        label: 'Cancel',
        "input-class": 'btn btn-outline-dark btn-sm',
        '@click': 'cancel-click'
      },
      {
        name: 'save',
        type: 'button',
        label: 'Save as Draft',
        "input-class": 'btn btn-outline-dark btn-sm',
        '@click': 'save-click'
      },
      {
        name: 'submit',
        type: 'submit',
        label: 'Send',
        "input-class": 'btn btn-info btn-sm'
      }
    ]

Leave a comment