laravel - 如何更改 vuejs laravel 中的选项标签

Question

我正在学习 VUE，无法弄清楚如何更改选择中的选项标签。

我有这个从控制器发送到查看的数组。

 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>
            />

但仍然只显示标签。

标签： laravelvue.js