Shopware 6 sw-entity-single-select empty options

Question

I am using the <sw-entity-single-select tag, but the items inside are empty. The amount of items are correct, and the console.log data on change also gives correct data. Maybe i'm missing an attribute or something?

This is the tag

<sw-entity-single-select
    v-model="component.dimensionType"
    entity="dimension"
    :localMode="component.isNew()"
    label="Koppel dimensie aan component"
    @change="setDimension"
>
</sw-entity-single-select>

And this is the entity definition of dimension

return new FieldCollection(
            [
                (new IdField('id', 'id'))->addFlags(new Required(), new PrimaryKey()),
                (new StringField('title', 'title'))->addFlags(new Required()),
                (new OneToManyAssociationField(
                    'components',
                    ComponentDefinition::class,
                    'dimension_type',
                    'id'))->addFlags(new RestrictDelete(), new ReverseInherited('dimensionType')
                ),
            ]
        );

And the relation the other way around in component

new FkField('dimension_type', 'dimensionType', DimensionDefinition::class),
                new ManyToOneAssociationField(
                    'dimension',
                    'dimension_type',
                    DimensionDefinition::class
                ),

Answer 1

I think you missed labelProperty attribute which specifies the text of each item.

Answer 2

If you have a custom entity Vue doesn't know which property to take as a name. Therefore you have to pass your custom name within the provided slot of the sw-entity-single-select component.

An Example:

<sw-entity-single-select
    v-model="component.dimensionType"
    entity="dimension"
    :localMode="component.isNew()"
    label="Koppel dimensie aan component"
    @change="setDimension">

    <template #result-item="{ item, index }">
        <slot name="result-item" v-bind="{ item, index }">
            <li is="sw-select-result" v-bind="{ item, index }">
                {{ item.title }}
            </li>
        </slot>
    </template>
</sw-entity-single-select>