Событие Vue click для нескольких исключений элементов td в первом и последнем - PullRequest
Новая
       16

Событие Vue click для нескольких исключений элементов td в первом и последнем

0 голосов
/ 04 февраля 2019

Я хочу использовать событие клика в моей таблице, чтобы перейти на подробную страницу строки, по которой щелкнули, с исключением в начале ипоследний элемент 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 без повторения кода?

1 Ответ

0 голосов
/ 04 февраля 2019

Вы можете добавить этот модификатор события к элементу td, который вы не хотите запускать, щелкнув: 

v-on:click.stop=""

и оставив @click на элементе tr.

Youможете проверить документацию для получения дополнительной информации: 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>
...