CODEWITHSUNDEEP
vue.js
dave
dave

Reputation: 575

Conditional @click for <th> in VueJS

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!

Upvotes: 2

Views: 886

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

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) }"

Upvotes: 2

Related Questions