I need to display a dropdown selector for rows per page in the DataTable component from PrimeVUE.
This is the sample HTML code I currently have for the DataTable:
<DataTable :value="comunicaciones" :paginator="true" :rows="numFilas" :rowsPerPageOptions="comboFilas">
Here is the setup of the data() function in my component:
data() {
return {
comunicaciones: null,
columnas: null,
numFilas: 10,
comboFilas: [
{ label: "10", value: 10 },
{ label: "30", value: 30 },
{ label: "50", value: 50 }
]
};
}
After this, the resulting HTML code on the page should be:
<dropdown value="10" options="[object Object],[object Object],[object Object]" optionlabel="label" optionvalue="value"></dropdown>
The table functions correctly with all rows loading as expected, but the dropdown seems to be causing some issues. Can someone guide me on how to properly configure the arguments for displaying the rows per page dropdown? Thank you!
UPDATE: It appears that setting the comboFilas array as shown above, or as an array of integers both work correctly. However, upon inspecting the console while loading the page, the following error message shows up:
[Vue warn]: Unknown custom element: <Dropdown> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <RowsPerPageDropdown> at node_modules/primevue/components/paginator/RowsPerPageDropdown.vue
<DTPaginator> at node_modules/primevue/components/paginator/Paginator.vue
<DataTable> at node_modules/primevue/components/datatable/DataTable.vue
<UltimasComunicaciones> at src/components/UltimasComunicaciones.vue
<App> at src/App.vue
<Root>
It seems like the dropdown component is not being loaded correctly. The relevant portion of my component's code is as follows:
<script>
import axios from "axios";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Button from "primevue/button";
import Dropdown from "primevue/dropdown";
export default {
name: "UltimasComunicaciones",
components: {
DataTable,
Column,
Button,
Dropdown
},
Based on the imports and paths, everything seems correct. If anyone has encountered a similar issue, your assistance would be greatly appreciated!