[Vuejs]-VueJS – How to track change event of a content from component

by

0👍

I think you should use something like the moment.js library to do calculations directly with item.timestamp as this feels a bit hacky.

In answer to your question – The innerText is not reactive but you can set it to a value that is and watch that variable.

<template>
  <div>
    <timeago
      :since="item.timestamp"
      :auto-update="60"
      ref="myTimeStamp">
    </timeago>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeago: null
    }
  },
  watch: {
    timeago: function() {
      console.log("WATCH:", this.timeago)
    }
  },
  created() {
    let self = this;
    setInterval(() => {
        this.timeago = self.$refs['myTimeStamp'].$el.innerText;
    }, 1000);
  }
}
</script>

Leave a comment