我正在学习VUE,无法弄清楚如何更改select中的选项标签。
我有这个数组,我从Controller发送到视图。
previewData
0=>[
'label' => 'abc',
'width' => 123,
'height' => 432
]
1=>[
'label' => 'abc',
'width' => 123,
'height' => 432
]
这是我的代码
import vSelect from 'vue-select';
export default {
props : [
'preview_size',
],
data : () => {
return {
previewData : [],
assetData : {id: 0, name: '', parent_id: '', nameError: '', maintain_version: true},
selectedItem : {},
selectedPreview : null,
scalePreview : false,
selectedSection : {},
selectedBlocks : {},
versionchange : null,
previousVersion : null,
previousSections: [],
losses : [],
previewLink : '',
instantDownload : false,
tags : [],
selectedTags : [],
selectedElements: [],
};
},
created() {
this.previewData = JSON.parse(this.preview_size);
components: {
uuid,
vSelect,
});
<v-select
class='form-control col-md-8'
v-model='selectedPreview'
:options='previewData'
data-error='Please correct this field.'
/>
我无法弄清楚如何更改它显示的标签
<option>abc</option>
<option>abc</option>
我想像这样展示
<option>abc 123 x 432</option>
<option>abc 123 x 432</option>
我尝试了什么
<v-select
class='form-control col-md-8'
v-model='selectedPreview'
:options='previewData'
data-error='Please correct this field.'
<template slot="option" slot-scope="option">
<span :class="option.label"></span>
{{ option.width }}px x {{ option.height }}px {{ option.label }}
</template>
/>
但仍然只显示标签。