Vue selectize，从选项中获取json数据？

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）而不是原始对象（而实际的@ 987654326@ 有权访问此对象）。

手册中提到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;