多個td元素上的Vue單擊事件在第一個和最后一個異常

Question

我想在我的表中使用單擊事件來轉到單擊行的詳細信息頁面，但第一個和最后一個 td 元素除外。

例子：

<tr v-for="(row, key) in $rows" :key="row.id">
  <td>*Input checkbox*</td>
  <td>{{ row.user.type }}</td>
  <td>{{ date | moment('MMMM') }}</td>
  <td>{{ row.customer.name }}</td>
  <td>{{ row.user.name }}</td>
  <td>{{ row.total }}</td>
  <td>*Icon to archive*</td>
</tr>

由於第一個和最后一個元素的異常，我無法使用：

<tr @click="detailPage(row.user.id)" v-for="(row, key) in $rows" :key="row.id">

由於重復代碼，我不想使用：

<tr v-for="(row, key) in $rows" :key="row.id">
  <td>*Input checkbox*</td>
  <td @click="detailPage(row.user.id)">{{ row.user.type }}</td>
  <td @click="detailPage(row.user.id)">{{ date | moment('MMMM') }}</td>
  <td @click="detailPage(row.user.id)">{{ row.customer.name }}</td>
  <td @click="detailPage(row.user.id)">{{ row.user.name }}</td>
  <td @click="detailPage(row.user.id)">{{ row.total }}</td>
  <td>*Icon to archive*</td>
</tr>

我試過但沒有觸發點擊事件：

<tr v-for="(row, key) in $rows" :key="row.id">
  <td>*Input checkbox*</td>
  <template @click="detailPage(row.user.id)">
    <td>{{ row.user.type }}</td>
    <td>{{ date | moment('MMMM') }}</td>
    <td>{{ row.customer.name }}</td>
    <td>{{ row.user.name }}</td>
    <td>{{ row.total }}</td>
    <td>*Icon to archive*</td>
  </template>
</tr>

我如何用 JQuery 解決：

$('table#tbl > tbody > tr > td').not(':first').not(':last').click(function() {
  // detailpage
})

來自點擊事件的方法

methods: {
  detailPage (id) {
    this.$router.push({path: `/timesheets/view/${id}`})
  },

Vue中是否有不重復代碼的正確方法？

Answer 1

您可以在不想通過 click 觸發的 td 元素上添加此事件修飾符：

v-on:click.stop=""

要不就 ：

@click.stop

並將@click 留在 tr 元素上。

您可以查看文檔以獲取更多信息： https ://v2.vuejs.org/v2/guide/events.html

 new Vue({ el: '#app', data: { message: 1 }, methods:{ add(){ this.message++; } } })

 td { border: 2px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <table> <tr @click="add()"> <td>Hello</td> <td v-on:click.stop="">Visitor n° {{message}}</td> </tr> </table> </div>