Mutation observer

Vue Bootstrap 5 Mutation observer

The mdbMutate is a custom directive which detects updates of an element, using Mutation Observer API.

Note: Read the API tab to find all available options and advanced customization

Basic example

Import the directive from 'mdb-vue-ui-kit' and add mdbMutate to the directives object. The directive uses Mutation Observer API - you can use the same options to configure the observer. You can pass separately options as modifiers and handler function as a value, or both as keys of and object. For Mutation Observer to work, one of childList, attributes, or characterData has to be set to true.

Edit text below:

Material Design for Bootstrap

Changes: 0

<template>
  <p>Edit text below:</p>
  <p class="border" contenteditable v-mdb-mutate="mutate">
    Material Design for Bootstrap
  </p>
  <p>Changes: {{counter}}</p>
</template>
<script>
  import { mdbMutate } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    directives: {
      mdbMutate
    },
    setup() {
      const counter = ref(0);
      const mutate = {
        handler: () => { counter.value++ },
        options: {
          childList: true,
          characterData: true,
          subtree: true,
          attributeFilter: ["value"],
          attributeOldValue: false,
          characterDataOldValue: true
        },
      };

      return { counter, mutate }
    }
  };
</script>
<script setup lang="ts">
  import { mdbMutate as vMdbMutate} from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const counter = ref(0);
  const mutate = {
    handler: () => { counter.value++ },
    options: {
      childList: true,
      characterData: true,
      subtree: true,
      attributeFilter: ["value"],
      attributeOldValue: false,
      characterDataOldValue: true
    },
  };
</script>

Mutation observer - API

Import

<script>
  import {
    mdbMutate
  } from 'mdb-vue-ui-kit';
</script>