Как заставить обновления во всех компонентах одновременно? - PullRequest
Новая
       19

Как заставить обновления во всех компонентах одновременно?

0 голосов
/ 21 апреля 2020

Я пытаюсь показать относительное время с моментом js, несколько секунд go, 5 минут go, час go и т. Д. 1014 * ... Когда html отображает, показывает относительное время, я имею в виду, «несколько секунд» или «час» go, в зависимости от того, сколько лет комментарию, но он застревает в этом состоянии и никогда не обновляется.

Это мой код ... Есть предложения? 

const components = new Set();
// Force update every component at the same time periodically
setInterval(() => {
  for (const comp of components) {
    comp.$forceUpdate();
  }
}, 60000);

Vue.component("FromNow", {
  template: '<span :title="title">{{ text }}</span>',
  props: ["date"],
  created() {
    components.add(this);
  },
  destroyed() {
    components.remove(this);
  },
  computed: {
    text() {
      return moment(this.date).fromNow();
    },
    title() {
      return moment(this.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
    },
  },
});

var app = new Vue({
  el: "#app",
  data() {
    return {
      comments: [
        {
          name: "Obedi1",
          id: 1,
          timestamp: 1587499864177,
          content: "quia et suscipit\nsuscipit recusandae",
        },
        {
          name: "Jhonj2",
          id: 2,
          timestamp: 1587499872202,
          content: "quia et suscipit\nsuscipit recusandae",
        },
        {
          name: "Janek3",
          id: 3,
          timestamp: 1587499898749,
          content: "quia et suscipit\nsuscipit recusandae",
        },
        {
          name: "Markl4",
          id: 4,
          timestamp: 1587499904071,
          content: "quia et suscipit\nsuscipit recusandae",
        },
      ],
    };
  },
});
<div id="app">
    <div v-for="(comment, index) in comments" :key="index">
      <h3>{{ comment.name }}</h3>
      <from-now :date="comment.timestamp"></from-now>
      <p>{{ comment.content }}</p>
      <br />
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="main.js"></script>

1 Ответ

0 голосов
/ 21 апреля 2020

Computed не может использоваться здесь, вычисляемое свойство никогда не будет обновляться, потому что return moment(this.date).fromNow(); не является реактивной зависимостью.

Для сравнения, вызов метода всегда будет запускать функцию всякий раз, когда происходит повторный рендеринг. Затем я попытался бы использовать метод вместо вычисляемого свойства.

...