Warning: session_start(): open(/var/lib/php/fpm/session/sess_lsvcibtnc17lp0buhr7eob56ob, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64
Vue Mutation Observer - Bootstrap 4 & Material Design - Material Design for Bootstrap

Vue Bootstrap Mutation Observer MDB Pro component

Vue Mutation Observer - Bootstrap 4 & Material Design

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>