0
我使用vue2-selectize顯示從Axios公司電話獲取選項列表:Vue selectize,從選項獲取json數據?
<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
)而不是原始對象(而實際的<option>
可以訪問此對象)。
手冊中提到可選參數dataAttr
可用於<option>
標籤,但設置<option :data-data="option">
沒有效果,我仍然無法訪問原始屬性。
如何訪問<option>
在渲染函數中使用的原始JSON屬性?