Topic: Ref Vuejs MDBFilter template with actions

karluk priority asked 3 months ago


Expected behavior Try to add some filter for search results with MDBFilter, and it won't support component. The template only support string. Actual behavior

Resources (screenshots, code snippets etc.)

const CorpusData = (item: ICorpusData) => `

${new Date(item._source["publication_date"]).toLocaleString( "en-US" )} ${item._source["snippet"]} { await store.dispatch( 'corpus/downloadSelectedCorpusData', ${item._id} ); }" > { await store.dispatch( 'corpus/getSelectedCorpusData', ${item._id} ); }" >

`;


Mateusz Trochonowicz staff commented 3 months ago

Hi, if you are talking about filter property, that supports objects - they are could be also passed as variables from you script section. If this is not the case, could you provide some additional informations?

In the meantime you could check some examples from our documentation: there are plenty ways to improve searching and filtering. https://mdbootstrap.com/docs/vue/plugins/filters/


Bartosz Cylwik staff answered 3 months ago


Hi. Providing a vue component via prop won't work. We can only pass a simple html template that vue can would be able to handle here.

If I understand correctly your case, you can try two things.

  1. Did you try the conditional rendering of Filter component (v-if) after receiving data from fetch? You could then try to pass the component as a slot like in the Basic Example (with use of some v-for loops) https://mdbootstrap.com/docs/vue/plugins/filters/#section-basic-example-dom-elements

  2. You can add actions (events) like in plain javascript. Simply add a class / data attribute to the template and then use addEventListener to the elements. Just make sure to add those events after the elements are present in the DOM

If it still doesn't solve your issues, please prepare a demo that we can check on and see whats going on and whether we can help with this.

Best Regards!


karluk priority answered 3 months ago


the MDBFilter has template attribute, and I want to use my component for my remplate. For example, in this code: `

Filters Condition {{ key }} import { MDBContainer, MDBRow, MDBCol,MDBSelect } from "mdb-vue-ui-kit"; import { MDBFilter } from "mdb-vue-filters"; import { ref, computed,watch } from "vue";

interface FilterItem { condition: string; name: string; image: string; }

const condition = ref({ new: false, used: false, collectible: false, renewed: false, });

const filters = computed(() => ({ condition: condition.value, }));

const filterDataset = ref([]);

fetch("src/components/products.json") .then((response) => response.json()) .then((data) => { filterDataset.value = data; });

const FilterProduct = (item: FilterItem) => <div class="col-md-4 my-4 justify-content-center text-center filter-item" data-mdb-filter-condition="${item.condition}" data-mdb-filter-animation="fade-in" > <div class="bg-image hover-overlay hover-zoom hover-shadow"> <img src="${item.image}" class="img-fluid w-100" alt="..." style="height: 325px" /> <a href="#!"> <div class="mask rounded" style="background-color: rgba(66, 66, 66, 0.2);"></div> </a> </div> <div class="pt-4"> <h5>${item.name}</h5> </div> </div> ;

// Selected conditions array to bind with multi-select const selectedConditions = ref([]);

// Watch for changes in selected conditions and update accordingly watch(selectedConditions, (newValue) => { // Update condition object based on selected conditions for (const key in condition.value) { condition.value[key] = newValue.includes(key); } }); `

the template is a string, and I want to use component. If it is not possibile, then I need help. I want to add some actions in the template string.

Thank you,


karluk priority commented 3 months ago

any help, please?


Bartosz Cylwik staff commented 3 months ago

Please check my answer above



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: Macbook
  • Browser: Chrome
  • OS: IOS
  • Provided sample code: No
  • Provided link: No