VueJS -如何跟踪组件中内容的更改事件

Question

我有一个VueJS应用程序，它使用vue-timeago在某些div中显示经过的时间。

这是HTML代码，timeago是这样的：

<div>
        <timeago
          :since="item.timestamp"
          :auto-update="60">
        </timeago>
      </div>

​

​

当运行时间大于50分钟时，我希望能够触发一个事件。

从阅读https://github.com/egoist/vue-timeago API，他们没有这样的功能实现。因此，解决方法可能是查看DOM中的输出值，并查看它何时发生变化，然后执行比较逻辑。

当这个watch值发生变化，然后比较字符串时，有什么方法可以让我这样做呢？

Answer 1

我认为您应该使用类似于item.timestamp的moment.js库来直接进行计算，因为这感觉有点麻烦。

在回答您的问题时，innerText不是反应性的，但您可以将其设置为一个值，即，并查看该变量。

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