Question

我使用vue2-selectize显示从axios调用中获取的选项列表：

<template>
    <selectize v-model="selected" :settings="settings">
        <option v-for="option in options" :value="option.id">
            ({{ option.author }}) - {{ option.description }}
        </option>
    </selectize>
</template>

<script>
    export default {
        props: ['old-value'],

        data() {
            return {
                selected: this.oldValue,
                options: [],
                settings: {
                    preload: true,
                    placeholder: "Search All Authors",
                    dropdownParent: 'body',
                    closeOnSelect: true,

                    render: {
                        option: function (data) {
                            console.log(data);
                            return '<div>' +
                                data.displayName +
                                '<div class="item-bio">' +
                                data.bio +
                                '</div>';
                        }
                    },

                    load: async (query, callback) => {
                        axios.get(route('api.showAllAuthors')).then(response => {
                            this.options = response.data;
                            callback();
                        })
                    }
                },
            }
        },
    }
</script>

问题是，一旦为选择设置<option>，您只能使用它传递给渲染函数（text和value）的两个值，而不是原始值object（而实际的<option>可以访问此对象。）

手册提到dataAttr标记的<option>可选参数，但设置<option :data-data="option">无效，我仍然无法访问原始属性。

如何在渲染函数中访问<option>正在使用的原始JSON属性？

Answer 1

var value = selectizeObject.getValue(),
    optionJson = selectizeObject.options[value];

selectizeObject是给定选择/输入的对象。例如，使用jQuery：

var selectizeObject = $('#my-select')[0].selectize;

Vue选择，从选项获取json数据？

1 个答案: