Topic: How to automatically convert ChipsInput to Array of Chips
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 10 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 pro premium priority commented 10 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 10 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 pro premium priority commented 10 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
- User: Pro
- 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