Vue.js Multiselect中的数据

时间:2017-10-17 08:02:48

标签: javascript vue.js

我有一些响应数据从服务器上通过Mounted axios呼叫返回,这很棒。

我希望在多选中使用某个部分作为选择选项:选项

Vue看起来像这样

.ql-editor li:nth-child(n+100):before { // should only work on classless <li>'s
  margin-right: 0.9em;
}

.ql-editor li:nth-child(n+1000):before { // should only work on classless <li>'s
  margin-right: 1.5em;
}

.ql-editor li.ql-indent-1:nth-child(n+703):before { // should only work on the .ql-indent-# <li>'s
  margin-right: 0.9em;
}

我的前端看起来

 // ===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>

我想做的就是使用响应中的clientname作为我的多选

我尝试过几种方法,但不能正确,我希望你能帮忙

1 个答案:

答案 0 :(得分:0)

如果您只关心客户端名称,则将响应中的结果映射到具有客户端名称的字符串数组。我假设您收到了一系列客户

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