Trouble With Component Special Field

[jvb187]

Hello,

I am trying to test using a component for a special field. I followed the tutorial from vuetable-2 like the documentation says, but I receive the following error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I have properly registered my component:

import Vue from 'vue';
import Vuetable from 'vuetable-3';
import CustomActions from './CustomActions.vue';

Vue.component('custom-actions', CustomActions);

My fields data property looks like the following:

fields: [
        {
          name: 'name',
          title: 'Name',
          sortField: 'name',
        },
        {
          name: 'ip',
          title: 'IP Address',
          sortField: 'ip',
        },
        {
          name: '__component:custom-actions',
          title: 'Fullname',
          sortField: 'fullname',
        },
      ],

I am not sure where the vuetable-field- is coming from on my component name, but it seems like that is interfering with my component.

Or has the process changed and there is some other method of using custom components?

Thanks, Jeremy

[mannyyang]

Will take a look and will get back to you!

[jvb187]

I did find your CodeSansbox example that uses custom components. In that example, the component is passed directly as the name parameter of a field, without the '__component:' syntax:

import VuetableFieldSwitch from './VuetableFieldSwitch.vue'

{
    name: VuetableFieldSwitch,
    title: 'Toggle Switch',
    titleClass: 'center aligned',
    dataClass: 'left aligned',
    switch: {
      // label: 'Male?',
      label: (data) => data.name,
      field: (data) => data.gender === 'M',
    }
  }

This does work, so I really just want to make sure that this is the proper way of using a special component field with Vuetable-3. Also, the tutorial from Vuetable-2 leaves out the fact that you have to have logic in the component to handle weather you are rendering the TH or TD for the custom field:

<template>
  <th v-if="isHeader"
    class="vuetable-th-component-switch"
    v-html="title"
  ></th>
  <td v-else
    class="vuetable-td-component-switch"
  >
    <div class="ui toggle checkbox">
      <input type="checkbox"
        @change="toggleSwitch(rowData, $event)"
        :checked="checkValue(rowData, rowField)"
      >
      <label v-if="rowField.switch.label">{{ label(rowData, rowField) }}</label>
    </div>
  </td>
</template>

Thanks, Jeremy