Changed made to __component in next branch ?

[TheFrankman]

Hello There,

I'm trying to upgrade to the 'next' branch and some functionality that was working fine before has now broken. Have you made changes to the way in which you load a custom component as a field ?

CustomActions.vue

export default {
        name: 'storage-custom-actions',
       ....

StorageFields.js (imported into VueTable.vue)

{
    name: "__component:storage-custom-actions",
    title: "Actions",
    titleClass: "actions text-center hidden-xs",
    dataClass: "actions text-center hidden-xs"
}

VueTable.vue

import CustomActions from "./CustomActions";
Vue.component("storage-custom-actions", CustomActions);

I now get the error :

[Vue warn]: Unknown custom element: <vuetable-field-component:storage-custom-actions> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Essentially it's exactly the same as your tutorial : https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-11#__componentname

Works fine on the main release, just not on 'next' branch

[ratiw]

@TheFrankman There are some changes in v2.0 but it should be easy to fixed. Please see this and this for more detail explanation.

In your case, I would recommended switching to use Field Slot as it should minimally affect your code. As for Field Component you are now responsible to rendering both the th and td of the component, but it should be easy enough.

If you're still struggle, please let me know. Sorry for the inconveniences.

[TheFrankman]

Hello @ratiw

Thanks so much for the quick response. I've already been through both those links but I'm not getting any closer.

I can't really use a slot because the component contains a lot of logic, i.e. a button with a drop down list of actions that trigger certain events etc.

I've modified by component to use the th and td. Have i got the naming muddled up some how, as it doesn't seem to know how to find the component. If i can get that far the rest I can figure out for myself.

Again, thanks for your response !!!

[TheFrankman]

In my StorageTableFields.js i've changed to this :

{
            name: `__storage-custom-actions`,
            title: "Actions",
            titleClass: "actions text-center hidden-xs",
            dataClass: "actions text-center hidden-xs"
        }

In my CustomActions.Vue

I have :

name: 'vuetable-field-storage-custom-actions',

[Vue warn]: Unknown custom element: <vuetable-field-storage-custom-actions> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VuetableRowHeader> at node_modules/vuetable-2/src/components/VuetableRowHeader.vue
       <Vuetable> at node_modules/vuetable-2/src/components/Vuetable.vue
         <StorageVuetable> at resources/assets/js/components/Storage/Vuetable.vue
           <Storage> at resources/assets/js/pages/Storage.vue
             <Root>

[TheFrankman]

Hello @ratiw - Ignore the above.

I have got somewhere now. I have a new error that's just missing required prop "rowData" just need to figure out how to actually pass the rowData prop to the component. Any idea how this is achieved ?

[ratiw]

@TheFrankman Did you use the VuetableFieldMixin? Just import and register it in the mixins section of the component. See the example here

[TheFrankman]

Hello @ratiw - I did that but I didn't remove the rowData from my own props in the component. I just have a 401 unauthorised with Laravel to deal with. Guessing this is centred around http-options and axios which was working in the previous version.

Having a play around with this now.

app.js

import axios from "axios";
window.axios = axios;
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    console.log(token);
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found');
}

[TheFrankman]

Incase anyone lads on this issue via google. I'm not entirely sure why the axios default headers are being ignored for this new version of vuetable but I resolved it by keeping the above in my app.js then adding the following to my vuetable :

  <vuetable ref="vuetable"
                  track-by="id"
                  api-url="/api/v1/storage"
                  :http-options="fetchHeaders()"
...

methods: {
    fetchHeaders() {
        return { headers: {'X-CSRF-TOKEN': window.axios.defaults.headers.common['X-CSRF-TOKEN']} }
    },
    ...

Thanks for your amazing help @ratiw - Keep up the good work !

[ratiw]

@TheFrankman Have you look at httpFetch yet?

[TheFrankman]

@ratiw - I did but seemed overly complex for just adding a single header. Thanks though! Mark this one as resolved 👍

[warlord0]

@TheFrankman you should revisit this. It's easier than you think.

By using :http-fetch="getData" just call the global instance of axios. Then it keeps all your common headers.

    // replaces the vuetales own call to api-url to handle jwt auth and laravel csrf
    getData (apiUrl, httpOptions) {
      return this.$http.get(apiUrl, httpOptions)
    },

Or change the instance and add delete your own. https://warlord0blog.wordpress.com/2018/08/01/axios-and-the-x-csrf-token/