MDB Transfer Component has funny rendering

bernspe pro premium priority commented a year 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 a year ago

I'm glad it helped. We have information about importing the css inside our plugin installation guide here: https://mdbootstrap.com/docs/vue/pro/plugins-installation/. 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:

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

<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;
});
</script>

bernspe pro premium priority commented a year ago

Yep, works. Thanks.