Vue.js Multiselect中的数据

Question

我在Mounted axios调用中从服务器返回了一些响应数据，这很棒。

我正在寻找在multiselect：options中将某个部分用作选择选项

Vue看起来像这样

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

我的前端看起来

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

我的回应是

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

我要做的就是在响应中使用客户端名称作为多选

我尝试了几种方法，但无法解决问题，我希望您能提供帮助

Answer 1

如果只关心客户端名称，则将结果从响应映射到具有客户端名称的字符串数组。 我假设您收到了很多客户

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