Data in Vue.js Multiselect

Question

I have some response data coming back from server on a Mounted axios call which is great.

Im looking to use a certain part as a select option in multiselect :options

Vue looks like so

 // ===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: {
    }

my front end looks

       <multiselect v-model="orderclient" id="orderclient" name="orderclient" :options="orderclientoptions"></multiselect>

and my response is so

{id: 1, clientname: "Tech Dojo", industry: "Tech", consultant: "Bob", clientstatus: "Lapsed",…}

All I wish to do is use the clientname in the response as my multi select

I have tried a few ways but cant get it right, Im hoping you can help

Answer 1

If you care only about client name then map results from response to string array with client name. I assume that you receive array of clients

mounted() {
    axios.get('clients/get')
         .then(response => 
               this.orderclientoptions = response.data.map(x => x.clientName);
}