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.