Блог

Главная - Вопросы по программированию - Первичная таблица данных не отображается

Первичная таблица данных не отображается

#vue.js #primevue

#vue.js #первичный

Вопрос:

Я пытаюсь использовать PrimeVue и использовать компонент DataTable — но он не отображается? Кажется, какая-то ошибка $ slots? Компонент кнопки отображается и работает должным образом. Table.vue

 <template>
    <div>
        <DataTable :value="products">
            <Column field="brand" header="Brand"></Column>
            <Column field="year" header="Year"></Column>
            <Column field="color" header="Color"></Column>
            <Column field="vin" header="Vin"></Column>
        </DataTable>
        <ColorPicker v-model="color" />
    </div>
</template>

<script>

    import DataTable from "primevue/datatable";
    import Column from "primevue/column";
    import ColorPicker from 'primevue/colorpicker';

    export default {

        name: "Table",
        props: {
        },
        data() {
            return {
                products: [
                    {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
                    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
                    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
                    {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
                    {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
                    {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
                    {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
                    {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
                    {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
                    {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
                ],
                color: '1976D2'

            }
        },
        components: {
            DataTable,
            Column,
            ColorPicker
        },
    }
</script>


<style scoped>

</style>

main.js

 import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
// Importing the Nova Light PrimeVue theme styles
import 'primevue/resources/themes/rhea/theme.css';

// Importing the base PrimeVue component styles
import 'primevue/resources/primevue.min.css';

// Importing the base PrimeIcon styles
import 'primeicons/primeicons.css';

Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Таблица данных отображается в Vue DevTools:
Таблица данных в инструментах

Я получаю эту ошибку в консоли «TypeError: this.$slots.default не является функцией»:

 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: this.$slots.default is not a function"

found in

---> <DataTable> at node_modules/primevue/components/datatable/DataTable.vue
       <Table> at src/components/Table.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839



TypeError: this.$slots.default is not a function
    at VueComponent.headerColumnGroup (DataTable.vue?dffe:1705)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as headerColumnGroup] (vue.runtime.esm.js?2b0e:4

Как мне исправить эту ошибку?

Ответ №1:

Редактировать: я добавил свой ответ, прежде чем понял, что алгоритм SO показал мне вопрос почти 2-летней давности. Я уверен, что вы уже поняли это…

При очень быстром просмотре я заметил, что у вас этого нет:

 import PrimeVue from 'primevue/config';

app.use(PrimeVue, { ripple: true });

В вашем main.js

Вы используете Vue 2 или Vue 3?

Я когда-либо использовал его только с vue 3, так что у меня main.js что-то вроде этого:

 import { createApp, reactive } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

// primevue
import PrimeVue from 'primevue/config';
import './assets/layout/layout.scss';

import 'primeflex/primeflex.min.css';
import 'primeicons/primeicons.css';
import 'primevue/resources/primevue.min.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/themes/fluent-light/theme.css';

// primevue components that get used multiple times throughout app
import Button from 'primevue/button';
// ... any others

// app has to be created after imports aparently
const app = createApp(App);

app.component('Button', Button); 
// ... any others

app.use(createPinia());
app.use(router);
app.use(PrimeVue, { ripple: true });


// globalProperties was designed for options API so instead of:
// app.config.globalProperties.$appState = reactive({ inputStyle: 'outlined' });
// I'm using provide/inject pattern instead: 
// https://vuejs.org/guide/components/provide-inject.html#provide
app.provide('$appState', reactive({ inputStyle: 'outlined' }));
app.provide('$primevue', app.config.globalProperties.$primevue);

// then in componentents that need access to them:
import { inject } from 'vue';
const $appState = inject('$appState');
const $primevue = inject('$primevue');