Topic: MDB Transfer Component has funny rendering

bernspe priority asked 8 months ago

Expected behavior Correct render of MDB Transfer Component Actual behavior Funny rendering - see screenshot. Reload doesnt change the appearance Resources (screenshots, code snippets etc.) SCreenshot of MDBTransfer

Component: mdb-vue-transfer-2.2.0.tgz

Bartosz Cylwik staff answered 8 months ago

Hi! Did you import the css file for the transfer plugin?

import 'mdb-vue-transfer/css/mdb-vue-transfer.min.css';

bernspe priority commented 8 months ago

Thanks, that solved the display issue. Could you add this to the docs, please?

Another issue comes now, as it seems that :dataSource property does not react to computed values (e.g. after loading from API) ??

Bartosz Cylwik staff commented 8 months ago

I'm glad it helped. We have information about importing the css inside our plugin installation guide here: We'll keep in mind updating our docs in the future so that the info would be more visible.

As of the second issue. You are right, changing the ref value doesn't update the transfer plugin table. I've found some workaround for that though. We can mount the transfer plugin component after we receive the data.

For example something like this:

  <div v-if="dataReceived">
    <MDBTransfer :dataSource="dataSource" />

<script setup lang="ts">
import { MDBTransfer } from "mdb-vue-transfer";
import { ref, onMounted } from "vue";

const dataSource = ref();
const dataReceived = ref(false);

onMounted(() => {
  dataSource.value = [
    { data: "Lorem ipsum" },
    { data: "Something special" },
    { data: "John Wick" },
    { data: "Poland" },
    { data: "Germany" },
    { data: "USA" },
    { data: "China" },
    { data: "Madagascar" },
    { data: "Argentina" },

  dataReceived.value = true;

bernspe priority commented 8 months ago

Yep, works. Thanks.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: MacOSX
  • Provided sample code: No
  • Provided link: No