Event on nested draggables

Dear all,

It has been many hours that I’m working on it and I’m stucked on something so I contact you. I saw many topics on nested draggable but there isn’t my answer.

Context:

• I have two nested draggables
• I use vuex to manage the data (and the get and set in computed)

I try to set an event on items order change (parent or children) to start my ajax request and save the data, however, as there are two nested draggables, whatever I use, @end, @sort, @change, @update or even watch… sometimes it fires two times (or I don’t want to start my ajax request two times). Please check my screen record https://youtu.be/GJbCeka8xI4, at the end in the console you’ll see it fires two times (for this example I use the change, on both draggables).

Is there a way, from the parent draggable, to detect any change (even from the children draggable it self) and fire a unique function?

My code:

<draggable v-model="publicPages" :options="{animation: 150, group: group}" @start="drag=true" @end="drag=false;" @update="onReorderEnd();" class="pages-container" v-bind:class="{ 'no-spacer' : !spacers }">
            <div class="page-container" v-for="(publicPage, index) in publicPages" v-bind:class="{ last : index === publicPages.length - 1 }">
                  <page v-bind:page="publicPage" v-bind:pageIndex="index" v-bind:group="group"></page>
                  <div v-if="publicPage.type === 'password'" class="protected-pages-container">
                    <div class="protected-notice">
                        <span class="protected-notice-icon icon-lock"></span>
                        <span class="protected-notice-content">Protected pages</span>
                    </div>
                    <sub-draggable v-if="publicPage.children" :page="publicPage" :pages="publicPage.children" :group="group" :spacers="spacers"></sub-draggable>
                  </div>
                  <span v-if="spacers" class="page-spacer icon-chevron-thin-right"></span>
              </div>
</draggable>

computed: {
      publicPages: {
        get() {
          return this.$store.state.campaignsPages.pages[this.group];
        },
        set(value) {
          this.$store.commit('campaignsPages/updateCampaignPagesState', {group:this.group, data:value});
        }
      }
    }

>>>> sub-draggable code below

<template>
  <draggable v-model="protectedPages" :options="{animation: 150, group: group}" @start="drag=true" @end="drag=false;" @update="onReorderEnd();" class="protected-pages">
    <div v-for="(protectedPage, protectedIndex) in protectedPages" class="page-container" v-bind:class="{ last : protectedIndex === protectedPages.length - 1 }">
        <page v-bind:page="protectedPage" v-bind:pageIndex="protectedIndex" group="protectedPages"></page>
        <span v-if="spacers" class="page-spacer icon-chevron-thin-right"></span>
    </div>
  </draggable>
</template>

computed: {
      protectedPages: {
        get() {
          return this.pages;
        },
        set(value) {
          this.$store.commit('campaignsPages/updateCampaignPasswordPagesState', {page: this.page, data:value});
        }
      }
    }

mixin

onReorderEnd() {
     this.$store.commit('campaignsPages/loopCampaignPages');
},

Thank you in advance for your help!

[clecocq]

Dear David,

Thank you for your answer and time, I got it working with your solution but with @change (not @end, because in one case it doesn’t fire, children to parent). So all is ok for me now, thank you again.

Cyril

[TLA020]

I fixed this issue by deep comparing the oldVal and newVal.

If any changes… then fire event.