Why do select and filters move in Vue 3?

Why do select and filters move in Vue 3?

ag281198ag281198 Posts: 9Questions: 7Answers: 0

I am making some datatables with vue 3 but the content is moving and I lost the css style of the tables. Any idea why this is happening? I attach screenshots of my table and my code.

<template>
    <DataTable :data="data" :columns="tableColumns" :options="tableOptions"></DataTable>
</template>

<script>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
DataTable.use(DataTablesCore);

export default {
    props: {
        fetchUrl: {
            type: String,
            required: true
        }
    },
    components: {
        DataTable,
    },
    data() {
        return {
        data: [],
        tableOptions: {
            paging: true,
            pageLength: 10,
            ordering: true,
            searching: true,
            autoWidth: false,
            language: {
            paginate: {
                first: 'First',
                previous: 'Previous',
                next: 'Next',
                last: 'Last',
            },
            search: 'Filter:',
            emptyTable: 'No data',
            },
        },
        tableColumns: [
            { title: 'ID', data: 'Id' },
            { title: 'Name', data: 'Name' },
            { title: 'Description', data: 'Description' },
            { title: 'Building', data: 'Building' },
            { title: 'Country', data: 'Country' },
            { title: 'Actions', data: 'Actions' },
        ],
        }
    },
    created() {
        fetch(this.fetchUrl)
            .then((response) => response.json())
            .then((data) => {
            this.data = data || [];
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    },
}
</script>

Answers

  • allanallan Posts: 63,503Questions: 1Answers: 10,471 Site admin

    Guess what this response will be as well :). I do worry that if they ever make an AI of me, all it will say is "please post a test case". But there is a reason it is in the forum rules and in the template text for a new post and in the header of the new post text. It makes it possible for me to offer some help.

    Allan

  • ag281198ag281198 Posts: 9Questions: 7Answers: 0

    Sorry, I didn't mean to do that. I just can´t find much information regarding this in Vue 3 and that´s why I was encouraged to ask in case someone had already had the same doubt. I´m still sorry.

Sign In or Register to comment.