is there any way that i can override the click event through Vue.js

Question

I am currently using Vue-datatable, where I have a generic vue component as . I am using this base component to render data table and I have a @click event in the in the element. but as I use this component in various places I want the @click event to be overridden so that, I could call the diffenent method as per my need.

the below file is BaseTable.vue

<v-app id="inspire">
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :pagination.sync="pagination"
    select-all
    item-key="name"
    class="elevation-1"
  >
    <template v-slot:headers="props">
      <tr>
        <th>
          <v-checkbox
            :input-value="props.all"
            :indeterminate="props.indeterminate"
            primary
            hide-details
            @click.stop="toggleAll"
          ></v-checkbox>
        </th>
        <th
          v-for="header in props.headers"
          :key="header.text"
          :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
          @click="changeSort(header.value)"
        >
          <v-icon small>arrow_upward</v-icon>
          {{ header.text }}
        </th>
      </tr>
    </template>
    <template v-slot:items="props">
      <tr :active="props.selected" @click="props.selected = !props.selected">
        <td>
          <v-checkbox
            :input-value="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </tr>
    </template>
  </v-data-table>
</v-app>
</template>```

Could I possibly override the triggercall method shown above in the code?
Thanks.

Satyam Pathak · Accepted Answer · 2019-06-21T11:12:42.007

Trigger an event from your component, which can be listened from the parent component.

Let say in your DataTable component there is button which triggers a click :

 <button @click="$emit('triggerClick')">
     Hey trigger when someone clicks me
 </button>`

Now where you want to use DataTable component and want to execute a method when someone clicks the button which is inside DataTable

simply -

<Your-Component>

  <DataTable @triggerClick="yourMethodFoo"/>

</Your-component>

In case you want to have method inside the component and can override that from parent. Then this is the optional behaviour you want- It's like you want to create a which behaves globally.

You need to have an extra prop to tell your global component that you want method to be overridden by a parent method.

props: {
  parentHandler: {
    type: Boolean,
    default: false
  }
}

methods: {
  triggerClick() {
    if (this.parentHandler) {
      this.$emit(triggerClick)
       return
    }
    // execute anything bydefault

  }
}

<button @click="triggerClick">
   Hey trigger when someone clicks me
</button>`

So by default you will execute your default method but if you pass parentHandler= true to component it will execute the parent method

<Your-Component>
  <DataTable :parentHandler="true" @triggerClick="yourMethodFoo"/>
</Your-component>

is there any way that i can override the click event through Vue.js

1 Answers1