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值更改然后比较字符串时，我是否可以InnerHTML？

Answer 1

我认为你应该使用类似于moment.js库的东西直接用 item.timestamp 进行计算，因为这感觉有些笨拙。

回答你的问题 - 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>