I have a list of trailers that I pass into the model.
{“trailers”:[{“aServiceNextKM”:“294003”,“cServiceNextDate”:“”,“description”:“47’dd (2008)”,“rego”:“YV13MR”,“totalMileage”:“278522”,“type”:“Trailer”},{“aServiceNextKM”:“626905”,“cServiceNextDate”:“2023-08-28”,“description”:“48’dd (2017”,“rego”:“YV14MR”,“totalMileage”:“624039”,“type”:“Trailer”},{“aServiceNextKM”:“728000”,“cServiceNextDate”:“”,“description”:"SX 44’FLAT ",“rego”:“YV47AM”,“totalMileage”:“712165”,“type”:“Trailer”}],“staff”:{}}
I have a vueMultiSelect that I want to show model.trailers.rego for people to select. This is not working.
Q1. How do I do this?
Then I want to show some of the other details about the selected trailer in a html block.
Q2. How do I do this?
First, the multiselect takes an array as a value, so you would instead target model.trailers rather than model.trailer.rego. Next, you can add an option key label where you can specify which key you want to show as a label. In this case, it would be rego. Altogether, it would look something like this:
{
"styleClasses": "col-md-3",
"type": "vueMultiSelect",
"label": "Simple Select",
"placeholder": "Select an option...",
"model": "selectedOption",
"required": true,
"validator": "required",
"values_calc": "model.trailers",
"selectOptions": {
"multiSelect": false,
"closeOnSelect": true,
"allowEmpty": false,
"searchable": true,
"showLabels": false,
"label": "rego"
}
}
Notice how I specified selectedOption as my model. This determines where the selection option will be saved. Using this, we can now show other information about the trailer in HTML, using something similar to:
<div>{{model.selectedOption.totalMileage}}</div>
Some resources I would recommend to find more information would be our Examples library, which can be found in the Help dropdown in BetterForms. For more information on multiselects specifically, you can check out the docs for this library here.