Conditional #click for <th> in VueJS - vue.js

Question

How can I conditionally enable/disable #click with v-if/v-else while iterating through with v-for on a <th>?
I have the following code:
<template>
<div id="TableHeaderDiv" class="TableHeaderClass">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th
v-for="column in columns"
v-bind:key="column.DataField"
#click="sortBy(column.DataField)"
:class="{ active: sortKey == column.DataField }"
:style="{ width: column.Width }"
>
{{ column.DisplayText }}
<div v-if="!column.isControl">
<span
class="arrow"
:class="sortOrders[column.DataField] > 0 ? 'asc' : 'dsc'"
></span>
</div>
</th>
</tr>
</thead>
</table>
</div>
</template>
I would like to write a condition so that v-if="!column.isControl" ... add the #click to the <th>.
My initial approach was to do something like this:
<template>
<div id="TableHeaderDiv" class="TableHeaderClass">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<div v-for="column in columns" v-bind:key="column">
<th
v-if="!column.isControl"
#click="sortBy(column.DataField)"
:class="{ active: sortKey == column.DataField }"
:style="{ width: column.Width }"
>
{{ column.DisplayText }}
<div v-if="!column.isControl">
<span
class="arrow"
:class="sortOrders[column.DataField] > 0 ? 'asc' : 'dsc'"
></span>
</div>
</th>
<th v-else :style="{ width: column.Width }">
{{ column.DisplayText }}
</th>
</div>
</tr>
</thead>
</table>
</div>
</template>
But this just created a handful of <div> elements which is not what I intend to do.
Perhaps I am missing a fundamental concept with conditional rendering. Any help is much appreciated!

Answer 1

If you are using Vue.js 2.6 or higher you can pass null to the #click directive, and thus click listener will not be bound.
More details can be found in this RFC. Conveniently, if the argument
value is null, the binding/listener will be removed.
So your code could look something like this:
v-on="{ [!colum.isControl ? 'click' : null]: sortBy(column.DataField) }"