我想在我的表格中使用一个点击事件去点击行的detailpage,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有没有不重复代码的正确方法?
最佳答案
您可以在不想通过点击触发的 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>
关于javascript - 多个 td 元素上的 Vue 单击事件第一个和最后一个异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54512624/