Topic: How to automatically convert ChipsInput to Array of Chips
bernspe priority asked 6 months ago
Expected behavior It should be possible to split Copy-pasted values with delimiters (e.g. with ',' or ';') into an Array of Chips. Is there a workaround? Actual behavior Currently there is no way to convert delimited strings to an Array of Chips when entered via copy-paste Resources (screenshots, code snippets etc.)
Bartosz Cylwik staff answered 6 months ago
Hi, you want to paste the string with delimiters to the input so that the input would create few Chips out of that am I right? Currently this feature is not supported. I think you can try to create some custom functionality for that with use of the paste
event and then mutating the v-model
value (add new strings) according to what was pasted to the input.
If you think this feature should be added to the mdb chips component, add a new feature request here:
https://mdbootstrap.com/support/new-feature-request/
bernspe priority commented 6 months ago
Ok, so if I have this function for the paste event:
function pasteDiagnoses(e: ClipboardEvent) { var clipboardData, pastedData;
// Stop data actually being pasted into div e.stopPropagation(); e.preventDefault();
// Get pasted data via clipboard API clipboardData = e.clipboardData pastedData = clipboardData?.getData('Text');
let pArr = pastedData?.split(';').map(s=>s.trim()) if (pArr) diagnosesInput.value.push(...pArr) console.log(pArr) }
diagnosesInput is my v-model of the ChipsInput. However, the Chips won't appear, although I can see them in the console...
Bartosz Cylwik staff commented 6 months ago
I have this snippet with example of chipsInput reactivity. Maybe it would be helpful to you: https://mdbootstrap.com/snippets/vue/b-cylwik/6062555#js-tab-view
bernspe priority commented 6 months ago
Thanks a lot. The v-model doesn't accept the push method. So I did it your way and it worked.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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