Unknown custom element: <custom-actions> - did you register the component correctly?

[hamidh2]

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

" i put my codes here.please tell me my mistake! ``` import Vue from 'vue'; import Component from 'vue-class-component'; import { Vuetable, VuetablePagination, VuetablePaginationInfo } from 'vuetable-2'; import { CustomActionsComponent } from '../CustomActions'; import accounting from 'accounting'; import moment from 'moment'; @Component({ template: require('./personnel.html'), components: { Vuetable, VuetablePagination, VuetablePaginationInfo , 'custom-actions': CustomActionsComponent } }) 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) } 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' ? ` Male` : ` Female` } makeAllCharCapital(value) { return value.toUpperCase(); } mounted() { } } ``` `

<div class="vuetable-pagination ui basic segment grid">
  <vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>

  <vuetable-pagination ref="pagination" style="display:inline-flex" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>

`

[hamidh2]

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() {

  }
}