vue.js - 如何忽略点击 TD 标签不会自动将我重定向到另一个 View ？ View

Question

我有一个表，在每个 TR 中，当我单击它时，它会将我重定向到另一个包含详细信息的 View ，我的想法是我从未使用过 Vue，我想不出如何在我单击时禁用该事件表的第一个 TD 标签。

之前在 Jquery 中我是这样做的:

//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');
    }
  });

但是对于 Vue，我不知道如何在 onclick 事件中执行此操作。

这是我的表和方法

<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;
},

例如，在表格的第一个 TD 中，我希望它不会将我重定向到该页面，而是从第二个 TD 开始重定向我。

Answer 1

在第一个 td 元素上使用这个 even 修饰符 - @click.stop

Prevent on click on parent when clicking button inside div

这种问题曾经回答过..请看一下