0

I use vue(2.6.10) an Im trying to build a universal table with vuetable2 (2.0.0-beta.4).

I created a component for the general methods of vuetable.

I tried to place my "MyCustomTemplate" in the slot section of the "MyVueTable", but I got no error and nothing is shown.

My goal is to use the "MyVueTable" in other vue pages and replace the "MyCustomTemplate".

I have currently 3 entries in my data but in the List.vue component nothing is shown


List.vue

<template>
    <MyVueTable :data="data" :fields="fields">
        <MyCustomTemplate v-slot="vueTableTemplateSlot"/>
    </MyVueTable>
</template

<script>
export default {
    name:"List",
    data(){
        return{
            data: [],
            fields: [
                {
                    name: 'vueTableTemplateSlot'
                }
            ]
        };
    }
}
</script>

MyVueTable.vue

<template>
    <vuetable ref="vuetable">
        <slot name="vueTableTemplateSlot" slot-scope="props"/>
    </vuetable>
</template>
<script>
    export default {
        name: 'MyVueTable',
        props: ['data', 'fields'],
        methods:{
            //vuetable methods
        }
    }
</script>

MyCustomTemplate.vue

<template>
    <div>
        {{rowData.id}}
    </div>
</template>
<script>
    export default {
        name: 'MyCustomTemplate',
        data(){
            return{
                rowData: null
            }
        }
</script>
Marvin Thör
  • 191
  • 1
  • 11

2 Answers2

0

You can test to put your component(in List.vue) in a div or a template that will be the slot content :

<template #nameOfYourSlot>
      <NameOfYourComponent>
</template>
Adri HM
  • 2,314
  • 2
  • 17
  • 30
0

This was answered in the official repository, you need to do this to be your custom global component: https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-17

BLNK
  • 123
  • 1
  • 12