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