samedi 19 septembre 2020

checkbox is updating it's state after closing the modal - vuejs

Child Modal

I have a child modal which is having product list with checkboxes. I am selecting some product from that list.By clicking 'Add product' button in modal, it is displaying those products in Parent component.

Parent Component

After displaying those selected products in parent if i click again the 'showModal' button. Those selected checkboxes are unchecked like initial stage. So, my problem is how to get those checked product of previous selection.

Child component emit event

I am sending the selected product details by emitting event.

    addEntry() {
    this.$emit('onSelectedProduct', this.checkedProductList)
    this.$store.dispatch('hideProductModal') // just dispatched action for close modal.
  }

Parent component(code snippet)

<product-list @hideModal="hideProductModal" @onSelectedProduct="onUpdatedProduct"/>

methods

showModal() {
    this.$store.dispatch('showModal')
  }
  hideProductModal() {
    this.$store.dispatch('hideProductModal')
    this.$store.dispatch('resetProductModal')
  }

  onUpdatedProduct(data) {
    this.selectedProductEntries = data
  }

These methods are working fine and other functionalities too. But, if i click again the showModal then checkboxes are in intial phase again. how to sync the checkboxes on previous selection to show the previously selected product in modal.

How to do this?




Aucun commentaire:

Enregistrer un commentaire