How to automatically convert ChipsInput to Array of Chips

Topic: How to automatically convert ChipsInput to Array of Chips

bernspe priority asked 8 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.)

Add comment

Bartosz Cylwik staff answered 8 months ago

1 0 Best answer

Please insert min. 20 characters.

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 8 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...

Please insert min. 15 characters.

Bartosz Cylwik staff commented 8 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 8 months ago

Thanks a lot. The v-model doesn't accept the push method. So I did it your way and it worked.

Add comment

Write

Create snippet

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 4.1.1
Device: Desktop
Browser: Chrome
OS: MacOSX
Provided sample code: No
Provided link: No

bernspe

2Support score
16Questions 2Answers 1Snippets