Question

我想使用表中的 click事件转到被点击的行的详细信息，并在上添加 exception >第一个和最后一个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

您可以在您不想通过点击触发的td元素上添加此事件修饰符：

v-on:click.stop=""

并在tr元素上保留@click。

您可以查看文档以获取更多信息： https://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>

多个td元素上的Vue Click事件在第一个和最后一个异常

1 个答案: