How to ignore that clicking on a TD tag does not automatically redirect me to another view? Vue

Viewed 402

I have a table where in each TR when I click it redirects me to another view with the detail, the idea is that I have never worked with Vue and I can't think how to disable the event when I click on the first TD tag of the table.

Before in Jquery I did it this way:

//Add onclick to TR
  $('table tr').click(function(e) {
    // Avoid redirecting if it's a delete button
    if(!$(e.currentTarget).hasClass('delete')) {
      // Not a button, redirect by taking the attribute from data-route
      window.location.href = $(e.currentTarget).data('route');
    }
  });

But with Vue I don't know how to do it in the onclick event.

This is my table and the method

<table
  id="accounts-table"
  class="
    table table-listbox
    table-bordered_
    table-responsive-md
    table-striped_
    text-center_
  "
>
  <thead>
  </thead>
  <tbody>
    <tr v-if="tableData.length === 0">
      <td colspan="4" class="text-center">
        No hay oportunidades para mostrar.
      </td>
    </tr>

    <template v-if="loading === true">
        <tr colspan="9" class="text-center">
          <b-spinner variant="primary" label="Spinning"></b-spinner>
          <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
        </tr>
    </template>
    <template v-else>
      <tr
      v-for="(data, k) in tableData"
      :key="k"
      @click="viewOpportunity(k, data)"
    >
      <slot :row="data">
        <td v-if="permissions.includes('view all opportunities')" width="10">
          <div class="iq-email-sender-info">
            <div class="iq-checkbox-mail">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="mailk">
                <label class="custom-control-label" for="mailk"></label>
              </div>
            </div>
          </div>
        </td>
        <td width="20">
          <vue-avatar
            :username="data.sales_man"
            :title="data.sales_man"
            :size="32"
            v-if="data.sales_man != ''"
          ></vue-avatar>
        </td>
        <td width="5">
          <template v-if="data.has_file != false">
            <i
              class="ri-attachment-line"
              style="font-size: 20px; color: #007bff"
            ></i>
          </template>
        </td>
        <td width="120" nowrap>
          <template>
            <p class="mb-0">{{ data.created_at }}</p>
            <small class="text-info mt-5">
              Fecha creación
            </small>
          </template>
        </td>
      </slot>
      </tr>
    </template>

  </tbody>
</table>

viewOpportunity(data) {
  window.location.href = "/opportunity/" + data.id;
},

For example in the first TD of the table I would like that it does not redirect me to the page but from the 2nd TD it redirects me.

1 Answers
Related