Я изучаю VUE и не могу понять, как изменить метку опций в select.
У меня есть этот массив, который я отправил из контроллера для просмотра.
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>
/>
Но все равно показывает только ярлык.