vue-mutation-observer
v0.1.2
Published
VueJS directive to observe changes in DOM use MutationObserver API
Downloads
1,533
Readme
vue-mutation-observer
VueJS directive to observe changes in DOM use MutationObserver API
Install
npm install vue-mutation-observer
or
yarn add vue-mutation-observer
CommonJS
You can use any build tool which supports commonjs
:
// register globally
const observer = require('vue-mutation-observer');
Vue.use(observer)
// or for a single instance
const { observer } = require('vue-mutation-observer');
new Vue({
directives: { observer }
})
Or in ES2015:
// register globally
import observer from 'vue-mutation-observer'
Vue.use(observer)
// or for a single instance
import { observer } from 'vue-mutation-observer'
new Vue({
directives: { observer }
})
Usage
Use v-observer
directive to observe DOM mutations in node and it's children.
<div v-observer:subtree.childList="handler">
// some content here
</div>
import { observer } from 'vue-mutation-observer'
export default {
directives: { observer },
methods: {
handler (mutations) { console.log(mutations) }
}
}
Arguments
| Argument | Description | | ----- | ----- | | subtree | Extend monitoring to the entire subtree of node. All of the other properties are then extended to all of the nodes in the subtree instead of applying solely to the target node. |
Modifiers
| Modifier | Description |
| ----- | ----- |
| characterData | Add properties characterData
and characterDataOldValue
to observer configuration |
| attributes | Add properties attributes
and attributeOldValue
to observer configuration |
| childList | Add property childList
to observer configuration |
If no modifiers is define - all properties in config will be defines as true
.
MutationObserver configuration
Value
Value may be a function, which handle your mutation or an object with two properties: callback
and config
.