How to use <sw-entity-multi-select> correctly?

user_1124269 0
Viewed 86

I am a bit confused how to use the component <sw-entity-multi-select>. I understand that the difference between this component and the <sw-entity-multi-id-select> is that the first one returns the entities and the latter one returns just the id of the selected entities. But from the structure and the props they are totally different.

I am confused, because I mainly use the component as this:

<sw-entity-multi-select
    entityName="language"
    :entity-collection="languages"
    :criteria="salesChannelLanguageCriteria"
    :label="Language"
    @change="selectLanguage"
>
</sw-entity-multi-select>

I could remove the entityName here, as the name is retrieved from the collection as well. But when I dig into the core, I see that inside selectLanguage I should do this:

selectLanguage(languages) {
    this.languageIds = languages.getIds();
    this.languages = languages;
}

I now understand that languageIds are kind of the v-model that determine, which entities should be selected in the component. Is this true? Why do I have to set the this.languages here again then? To me it's kind of magic if languageIds have this role here, because it's not referenced anywhere on the component. How does it work and how do I tell the component which items are selected - is using languageIds the correct way?

shopware6 shopware
1 Answers

I now understand that languageIds are kind of the v-model that determine, which entities should be selected in the component. Is this true?

No. This example probably just extracts the IDs for some other use, e.g. for adding associations of language to another entity. One could arguably that if this is the only purpose of the selection sw-entity-multi-id-select might be the better component to use.

Why do I have to set the this.languages here again then?

Because you want to store the updated entity collection to persist the selection. Whatever is selected within the multi select is derived from that collection. So, let's say, initially you start out with an empty entity collection. You select some entities and the change is emitted with the updated collection containing the selected entities. Given we have :entity-collection="languages" we then want this.languages to be this updated collection, so the selection persists. So we kinda complete a loop here.

On another note, you could also use the collection with v-model="languages". In that case any additions or removals within the selection would be applied reactively to the collection and you wouldn't need to set this.languages after each change and you could also remove :entity-collection="languages". So basically, which of these approaches you use depends on whether you want your changes applied reactively or not.

user_85562590
Related