How to Use sw-single-select in Shopware 6.7 — The Right Way to Bind and Populate Options

Learn how to correctly use the sw-single-select component in Shopware 6.7, including proper two-way data binding with v-model, defining option lists, and avoiding common reactivity pitfalls when working with entity fields.

Introduction

When building custom administration modules in Shopware 6.7, you’ll often want to provide dropdown selections — for example, choosing a ticket status, product attribute, or configuration value. The sw-single-select component is the go-to solution for this.

However, it has some subtle gotchas that can break reactivity or prevent your dropdown from updating values properly. In this guide, we’ll walk through the correct way to use sw-single-select — both inline in your template and dynamically via computed properties.

Basic Example

Here’s a simple sw-single-select dropdown for managing ticket statuses:

<sw-single-select
    label="Status"
    v-model:value="ticket.status"
    :options="[
        { value: 'open', label: 'Open' },
        { value: 'in_progress', label: 'In Progress' },
        { value: 'closed', label: 'Closed' }
    ]"
/>

Key points:

1. :options must be an array of objects — each with value and label keys.

2. Use v-model:value instead of just v-model.

   • This ensures proper reactivity with the Shopware entity system.

   • Without :value, you won’t be able to change the selection — the dropdown will appear “frozen”.

Why :value Matters

In Shopware 6.7’s Vue 3-based admin components, v-model is not automatically bound to “value” anymore.
By using v-model:value, you explicitly tell Vue which prop to bind to and which event to listen for.

If you omit the colon or use just v-model, you’ll run into:

• Changes not updating the entity field

• Dropdown not reacting to selection

• Silent reactivity issues that make debugging painful

Defining Options Dynamically

Instead of defining the options inline in your template, you can define them in your component’s script using a computed property:

computed: {
    shopwareAttributesSelectOptions() {
        return [
            { label: 'aaa', value: 'aaa' },
            { label: 'bbb', value: 'bbb' },
            { label: 'ccc', value: 'ccc' },
        ];
    },
},

Then, bind it in your template like this:

<sw-single-select
    label="Attribute"
    v-model:value="ticket.attribute"
    :options="shopwareAttributesSelectOptions"
/>

This approach is cleaner and allows you to:

• Load options dynamically (e.g., from an API or repository)

• Localize labels

• Keep your template more readable

Binding to Entity Fields

If you’re using sw-single-select with entity data (for example, a ticket entity), make sure you fetch your entity correctlybefore binding:

this.ticket = await this.repository.get(id, Shopware.Context.api, criteria);

Once this.ticket is populated, v-model:value="ticket.status" will automatically reflect changes — both from user input and repository updates.

Common Pitfalls

---

Summary

Using sw-single-select in Shopware 6.7 correctly comes down to three rules:

1. Always use v-model:value for entity fields.

2. Always define options as { value, label } objects.

3. Consider moving options into a computed property for better maintainability.

By following these conventions, your selects will be fully reactive, consistent, and easy to extend.