Vue MultiSelect with array of objects - output single value

Support
1

I have the following code for a Vue-MultiSelect:

{
        "styleClasses": "col-md-3",
        "type": "vueMultiSelect",
        "label": "Selected Project",
        "placeholder": "",
        "model": "id_Project",
        "required": true,
        "validator": "required",
        "selectOptions": {
            "multiSelect": false,
            "closeOnSelect": true,
            "searchable": true,
            "label": "name",
            "trackBy": "id",
            "id": "id"
        },
        "values_calc": "model.projects",
        "visible_calc": "model.projects.length > 1"
    }

Example of model.projects:

{
    "id": "50FD75B0-7B98-415E-8FAC-C8AC3BDDDE70",
    "name": "Payroll"
}, {
    "id": "44F52223-6DC8-43CC-AB6C-6B62078C34D6",
    "name": "Accounting"
}

When I select, I want the id to be put in the model at model.id_Project, but it’s putting the whole object of the selected project.

I could think of a few ways around this but wondering if there’s a quick solution I’ve missed. Wasn’t able to find anything about this in the docs at Vue-Multiselect | Vue Select Library

2

I just work with the object but …
Eric did above technique for this.

Basically on onChanged_actions and in the action a JS function that sets the id into what ever key!!

1 Like