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: {{counter}}

        
            
            <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>