1 1
import Vue, { WatchHandler } from 'vue'
2

3
/**
4
 * This mixin provides `attrs$` and `listeners$` to work around
5
 * vue bug https://github.com/vuejs/vue/issues/10115
6
 */
7

8 1
function makeWatcher (property: string): ThisType<Vue> & WatchHandler<any> {
9 1
  return function (this: Vue, val, oldVal) {
10 1
    for (const attr in oldVal) {
11 1
      if (!Object.prototype.hasOwnProperty.call(val, attr)) {
12 0
        this.$delete(this.$data[property], attr)
13
      }
14
    }
15 1
    for (const attr in val) {
16 1
      this.$set(this.$data[property], attr, val[attr])
17
    }
18
  }
19
}
20

21 1
export default Vue.extend({
22 1
  data: () => ({
23
    attrs$: {} as Dictionary<string>,
24
    listeners$: {} as Dictionary<Function | Function[]>,
25
  }),
26

27 1
  created () {
28
    // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
29
    // Make sure to use `attrs$` instead of `$attrs` (confusing right?)
30 1
    this.$watch('$attrs', makeWatcher('attrs$'), { immediate: true })
31 1
    this.$watch('$listeners', makeWatcher('listeners$'), { immediate: true })
32
  },
33
})

Read our documentation on viewing source code .

Loading