After making a Mounted axios call, I have received some response data from the server which is quite promising.
Now, I want to extract a specific part of this data to use as an option in a multiselect :options.
Here is what my Vue component looks like:
// ===Component name
name: "create_order",
// ===Props passed to component
props: {},
// ===Components used by this component
components: {
Datepicker,
Multiselect,
},
// ====component Data properties
data(){
return{
formcreateorder: {},
dateoforder: "",
format: 'dd MMMM yyyy',
orderconsultant: null,
orderconsultantoptions: ['Mr', 'Mrs', 'Miss', 'Ms'],
ordertype: null,
ordertypeoptions: ['Temp', 'Perm'],
orderclient: null,
orderclientoptions: []
}
},
// ===Code to be executed when Component is mounted
mounted() {
// Make a ajax request to get data from jobs route
axios.get('clients/get').then(response => this.orderclientoptions = response.data);
},
// ===Computed properties for the component
computed: {},
// ===Component methods
methods: {
}
Here is how my front end looks:
<multiselect v-model="orderclient" id="orderclient" name="orderclient" :options="orderclientoptions"></multiselect>
And here is the response I received:
{id: 1, clientname: "Tech Dojo", industry: "Tech", consultant: "Bob", clientstatus: "Lapsed",…}
My goal is to use the "clientname" in the response as my multiselect option.
I have tried a few approaches but haven't been successful. I'm hoping for some guidance on how to achieve this.