Mutation Directive
v1.3.0+

“Mutation” is a Quasar directive that provides the ability to watch for changes being made to the DOM tree and call a method when these are triggered.

Under the covers, it uses the Mutation Observer API.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    directives: [
      'Mutation'
    ]
  }
}

Usage

Reading the Mutation Observer API first will be best in your understanding of how this directive works.

The handler Function takes one parameter, which is an Array of MutationRecord.

Catch everything

By not specifying any modifiers (except for “once”), the Mutation directive will enable all of them.

Catch everything



Drag and drop example

The example below will only work for desktops because of the Drag and drop browser API support. Drag the colored squares to the other location to see the Mutation Observers results.

Drag and Drop (desktop only)



Undo-redo example

One use-case for the Mutation Observer is implementing an Undo/Redo stack in your application. You can observe additions and removals of data, depending on your filtering requirements. You can capture the mutations in a stack and use the stack to implement an undo. Any mutation data during an undo, can go into a redo stack. Don’t forget to clear the redo stack when normalized data is being put into the undo stack.

Undo/Redo



API