Open hamidh2 opened 6 years ago
i found my mistake is shuold register custom-action like below
Vue.component('custom-actions', CustomActionsComponent);
insted
@Component({
template: require('./personnel.html'),
components: {
Vuetable,
VuetablePagination,
VuetablePaginationInfo ,
'custom-actions': CustomActionsComponent
}
})
my final code is
import Vue from 'vue';
import Component from 'vue-class-component';
import { Vuetable, VuetablePagination, VuetablePaginationInfo } from 'vuetable-2';
import { CustomActionsComponent } from '../CustomActions';
import { DetailRowComponent } from '../detailrow';
import accounting from 'accounting';
import moment from 'moment';
Vue.component('custom-actions', CustomActionsComponent);
Vue.component('my-detail-row', DetailRowComponent);
@Component({
template: require('./personnel.html'),
components: {
Vuetable,
VuetablePagination,
VuetablePaginationInfo ,
}
})
export class PersonnelComponent extends Vue {
fields = [];
constructor() {
super();
this.fields = [
'__sequence',
{
name: 'name',
title: 'نام کاربری',
dataClass: 'text-center',
textClass: 'text-center',
callback: 'makeAllCharCapital',
sortField: 'name'
},
{
name: 'gender',
titleClass: 'center aligned',
dataClass: 'center aligned',
callback: 'genderLabel',
},
{
name: 'email',
sortField: 'email'
}, 'birthdate', 'address.line1',
{
name: '__component:custom-actions',
title: 'Actions',
titleClass: 'center aligned',
dataClass: 'center aligned'
}
];
}
$refs: {
pagination: HTMLFormElement,
vuetable: HTMLFormElement,
paginationInfo: HTMLFormElement,
paginationTop: HTMLFormElement,
paginationInfoTop: HTMLFormElement
}
onPaginationData(paginationData) {
this.$refs.paginationTop.setPaginationData(paginationData) // <----
this.$refs.paginationInfoTop.setPaginationData(paginationData)
this.$refs.pagination.setPaginationData(paginationData);
this.$refs.paginationInfo.setPaginationData(paginationData);
}
onChangePage(page) {
this.$refs.vuetable.changePage(page)
}
onCellClicked (data, field, event) {
console.log('cellClicked: ', field.name)
this.$refs.vuetable.toggleDetailRow(data.id)
}
formatDate(value, fmt = 'D MMM YYYY') {
return (value === null)
? ''
: moment(value, 'YYYY-MM-DD').format(fmt)
}
formatNumber(value) {
return accounting.formatNumber(value, 2);
}
genderLabel(value) {
return value == 'M'
? `<span class='label label-info'><i class='glyphicon glyphicon-star'></i> Male</span>`
: `<span class='label label-success'><i class='glyphicon glyphicon-heart'></i> Female</span>`
}
makeAllCharCapital(value) {
return value.toUpperCase();
}
mounted() {
}
}
hi im using vuejs with type script syntax (not the default vuejs syntax) base on the documentaion i used some code in order to use __component:customAaction example but i recieved the below error "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option found in