Sorry for lack of explanation and my skill.
I present my list.vue code.
I want to call showDetail from command.click event handler.
<template>
<div class="list">
<kendo-grid :data-source="localDataSource">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice"></kendo-grid-column>
<kendo-grid-column :command="command" title=" " width="80px"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name: 'list',
data() {
return {
localDataSource: [],
command: [
{
name: "showdetail",
click: function (e) {
e.preventDefault();
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
How to call showDetail ?
}
}
],
showDetailId: 'Hello Vue!',
}
},
created: function () {
this.fetchData()
},
methods: {
fetchData() {
axios.get("http://localhost:61763/api/fruits")
.then(response => { this.localDataSource = response.data })
},
showDetail(id) {
this.$router.push({ path: `/detail/${id}` })
}
}
}
</script>