I have integrated vue2-selectize to showcase a list of options fetched via an axios call:
<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>
The challenge I am encountering is that once the <option> for the select element is configured, I can only manipulate the two values it passes to the render function (text and value) and not the original object itself (which the actual <option> accesses).
The documentation mentions the optional parameter of dataAttr for <option> tags, but even after setting
<option :data-data="option">Is there a way to retrieve the original JSON attributes utilized by the <option> in the render function?