Ref Vuejs MDBFilter template with actions

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,

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!