1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: How to automatically convert ChipsInput to Array of Chips

bernspe priority asked 2 weeks 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 2 weeks 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 1 week 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 1 week 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 1 week ago

Thanks a lot. The v-model doesn't accept the push method. So I did it your way and it worked.
Write
Create snippet
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 4.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: MacOSX
  • Provided sample code: No
  • Provided link: No
Tags
mdbchipsinput
About author
bernspe
2Support score
15Questions 2Answers 1Snippets