css ->
.disabled {
pointer-events: none;
}
my template ->
<template v-slot:actions-slot="{ row }">
<Button v-if="canManageDeliveryPlan" variant="tertiary" small @click="handleCreatePlanClick(row)">
<span v-bind:class="[row.shipmentStatus === 'CANCELLED' && row.deliveryOrderCount == 0 ? 'disabled' : '']">v-if="!row.wasModifiedByUser">Create plan</span>
<span v-bind:class="[row.shipmentStatus === 'CANCELLED' && row.deliveryOrderCount == 0 ? 'disables' : '']" v-if="row.wasModifiedByUser">Edit plan</span>
Try to apply the class to the button element, not a span inside the button element.
<Button v-if="canManageDeliveryPlan" :class='myClass' variant="tertiary" small @click="handleCreatePlanClick(row)">
// computed ( or use a computed ref in vue3)
computed: {
myClass() {
const disabled =
row.shipmentStatus === 'CANCELLED' && row.deliveryOrderCount == 0
return {disabled}
}
}