Topic: How to get value of chips
I am looking to get the result of my chips component. I've searched through the API but the documentation seems to be inconsistent and outdated. The documentation uses both: chipsInput()
& ChipsInput()
constructors (I've only had success using ChipsInput()
). Some of the methods in the snippets (toggle()
), does not exist. Furthermore, getInstance()
does not work and neither does jQuery method chips()
(does not exist).
<div class="row mb-3">
<div class="col-3">
<label class="form-label">Keywords</label>
</div>
<div class="col">
<div id="keywords" class="chips chips-placeholder"></div>
</div>
<div class="col-2">
<label class="form-label">Ex: PSR, DEMI,..</label>
<div>
<div>
...
const key = $('#keywords').chips(); // $(...).chips is not a function
const key = mdb.ChipsInput.getInstance(document.getElementById('keywords')); // output is null
I can confirm that mdb.min.js is included
Expected behavior
return array of chips
Actual behavior no output
Resources (screenshots, code snippets etc.)
Michał Duszak staff answered 3 years ago
Hello,
I have prepared a snippet of example input with initial values where you can add more tags, and then, using the custom getValues()
method, you can get an array of chips values.
https://mdbootstrap.com/snippets/standard/m-duszak/3201856#js-tab-view
Jam105342 pro premium answered 2 years ago
Is there an updated method/technique to do this with MDB 5 Vue? Thanks!
Mateusz Trochonowicz staff pro premium priority commented 2 years ago
Hi! Array of chips (chipsList) is available in component's ref (MDBChipsInput).
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.0
- Device: Intel x86
- Browser: Chrome
- OS: Ubuntu 20.04
- Provided sample code: No
- Provided link: No