CODEWITHSUNDEEP
javascriptvue.js
Liam
Liam

Reputation: 505

Vue notification when component DOM changed

A prop change with no effect on the component's DOM triggers its updated function, unexpectedly.

https://jsfiddle.net/e5gyuorL/1/

Same result for v-html="markup()" or {{markup()}} or computed: { markup: ... }.

Docs for updated (https://v2.vuejs.org/v2/api/#updated) say:

Called after a data change causes the virtual DOM to be re-rendered and patched.

How does one catch actual DOM re-renders? If this is a FAQ, apologies; I looked at length.

Upvotes: 0

Views: 384

Answers (1)

Roy J
Roy J

Reputation: 43881

The most straightforward way I can think of is to have the component store its innerHTML in a data item, and on each update check to see whether it has changed:

Vue.component('t-markdown', {
  template: '#t-markdown',
  data: {
  	innerHTML: ''
  },
  props: {src:String},
  methods: {
    markup: function() { return this.src.slice(0,11) },
  },
  updated: function() { 
  	if (this.innerHTML !== this.$el.innerHTML) {
	  	this.$parent.count++;
      this.innerHTML = this.$el.innerHTML;
    }
   },
   mounted() {
   	this.innerHTML = this.$el.innerHTML;
   }
});

new Vue({
  el: "#app",
  data: {count:0, inp:'<b>src</b> '},
  methods: {
    change: function() { this.inp += '#' },
  },
  mounted() {
  	setTimeout(() => this.inp = '<i>changed!</i>', 7000);
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: sans-serif, Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <t-markdown :src="inp"></t-markdown>
  <button @click="change">change</button> updated: {{count}}
  <div>
    {{inp}}
  </div>
</div>

<script type="text/x-template" id="t-markdown">
  <div v-html="markup()"></div>
</script>

Upvotes: 1

Related Questions