How to watch for changes on the "revert" button?

Kirby 3 Solved ✅
1

I need to call a JS function when the user clicks the “revert” button (on any content entry). Any ideas on how to achieve this?

I’ve found the content/hasChanges vuex store. My thinking is to add a watcher to this value.

My initial thought was to do this:

// Note: This does NOT work

watch: {
   'this.$store.getters["content/hasChanges"]': function() {
     console.log()
   }
}

But that doesn’t work.

Then I thought to simply watch for changes to local storage, but apparently the storage event spec only supports changes made in other tabs/window (javascript - localStorage eventListener is not called - Stack Overflow). Who knew?

So I’m a bit stuck :frowning:

Any ideas on how to achieve this?

2

Alright, figured it out.

This works:

mounted() {
   this.$store.watch(
      () => this.$store.getters['content/hasChanges'](),
      (newValue, oldValue) => {
         // If `newValue` is `true` then the state has changed from "no changes" to "changes".
         // if `newValue` is `false` then the state has changed from "changes" to "no changes".
      }
   )
}
1 Like
3

Hi isaac,

crossing the same problem to solve this. Thanks for your solution, problem is, that this also is triggered on hitting save:

this.$store.watch(
            () => this.$store.getters['content/hasChanges'](),
            (newValue, oldValue) => {
                if( !newValue ) {
                    console.log('revert'); // also on save
                }
                // If `newValue` is `true` then the state has changed from "no changes" to "changes".
                // if `newValue` is `false` then the state has changed from "changes" to "no changes".
            }
        )

Or do I miss something?