Vue Bootstrap Mutation Observer MDB Pro component

Vue Mutation Observer - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'

        
            
      <script>
        import {
          mdbMutate
        } from "mdbvue";
      </script>

Step 2: Add mdbMutate to the directives object 

        
            
      <script>
        import {
          mdbMutate
        } from "mdbvue";
        export default {
          directives: {
            mdbMutate
          }
        };
      </script>

Step 3: 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. 

        
            
      <template>
        <div v-mdb-mutate="mutate">...</div>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbMutate
        } from "mdbvue";
        export default {
          directives: {
            mdbMutate
          },
          data() {
            return {
              mutate: {
                handler: () => {},
                options: {
                  childList: true,
                  attributes: true,
                  characterData: false,
                  subtree: false,
                  attributeFilter: ["one", "two"],
                  attributeOldValue: false,
                  characterDataOldValue: false
                }
              }
            };
          }
        };
      </script>
      
        
    
        
            
      <template>
        <div v-mdb-mutate.attributes="callback">...</div>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbMutate
        } from "mdbvue";
        export default {
          directives: {
            mdbMutate
          },
          methods: {
            callback(mutationList, observer) {
              //...
            }
          }
        };
      </script>

Basic example 

        
            
      <template>
        <mdb-select v-mdb-mutate="mutate" label="Mutation observer" :options="options" />
      </template>
      
        
    
        
            
      <script>
        import {
          mdbSelect,
          mdbMutate
        } from "mdbvue";
        export default {
          name: "ResizePage",
          components: {
            mdbSelect
          },
          data() {
            return {
              valueMutation: 0,
              options: [{
                  text: "Option nr 1",
                  value: "Option 1"
                },
                {
                  text: "Option nr 2",
                  value: "Option 2"
                },
                {
                  text: "Option nr 3",
                  value: "Option 3"
                },
                {
                  text: "Option nr 4",
                  value: "Option 4"
                },
                {
                  text: "Option nr 5",
                  value: "Option 5"
                }
              ],
              mutate: {
                handler: () => {
                  this.valueMutation++;
                },
                options: {
                  attributes: true,
                  subtree: true,
                  attributeFilter: ["value"]
                }
              }
            };
          },
          directives: {
            mdbMutate
          }
        };
      </script>