CODEWITHSUNDEEP
vuejs2shopware
Huzaifa Mustafa
Huzaifa Mustafa

Reputation: 322

How to pre-select "sw-entity-multi-select" component values from the database on load

I am using sw-entity-multi-select for product dropdown in a custom vue component in Shopware 6

<sw-entity-multi-select
        entity="product"
        :criteria="listingCriteria"
        :entityCollection="products"
        :isLoading="isLoading"
        @change="setProduct"
        :label="$tc('sw-cms.elements.productSlider.config.placeholder.selection')"
        :placeholder="$tc('sw-cms.elements.productSlider.config.placeholder.selection')"
>
</sw-entity-multi-select>

I fetch the products like so:

    getProducts () {
      this.products = new EntityCollection(
        this.productRepository.route,
        this.productRepository.entityName,
        Context.api
      )

      if (this.productIds.length <= 0) {
        return Promise.resolve()
      }

      this.listingCriteria.setIds(this.productIds)

      return this.productRepository.search(this.listingCriteria, Context.api).then((items) => {
        this.products = items
      })
    },

    setProduct (collection) {
      this.productIds = collection.getIds()
      this.products = collection
    },

It all works fine for saving the IDs for the first time, but I am not able to populate the saved products again on a re-load.

If I set the this.productIds from the value from the database, for e.g response.data.productIds and call this.getProducts() it selects those products fine but only those 2 or 3 products are available in the dropdown, and searching for other products shows "No result" message.

In short, I cannot add additional products anymore. Any suggestions?

I am using regular <sw-multi-select> as well for some other entities and it works fine as I have less than 500 records for those entities. But for the products I have more than 150k products so I cannot populate them all together at once so I need the functionality of <sw-entity-multi-select> as it calls the additional products on request and I can initially just load 25 or 50 products in the dropdown.

Upvotes: 1

Views: 1880

Answers (1)

Huzaifa Mustafa
Huzaifa Mustafa

Reputation: 322

If anyone stumbles upon this, I resolved it by setting productIds as v-model on the component.

Upvotes: 0

Related Questions