[Vuejs]-Extracting data from an API in typescript vue and to a prop

2👍

The custom component has selectValue and selectText props, which allows setting the b-form-select‘s value-field and text-field, respectively. You could set those to the desired values without having to remap your data:

<WDropDown :options="dropdownCommissionerValues"
   selectText="CommissionerName"
   selectValue="CommissionerId"
/>

demo

👤tony19

1👍

While not familiar with boostrapVue you could add keys (text and value) either after api call or from the component and using a computed.

Something like:

this.dropdownCommissionerValues = response.data.Table.map(option=>{
  option.text=option.commissionerName
  option.value=option.commissionerValue
  delete option.commissionerName // optional .... clean up the object
  delete option.commissionerValue // optional .... clean up the object
  return option
})

Leave a comment