How to re-render updated array? #7

kjk · 2021-07-04T00:45:35Z

kjk
Jul 4, 2021

I'm doing kind of streaming log from the server where I poll every few seconds for new data via fetch() and append to array of strings, which then I (want to) re-render. I can't figure out how to trigger re-render even though the array in question changes.

My code (based on https://github.com/vuejs/petite-vue/blob/main/examples/commits.html example):

<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
const kMaxEvents = 256;
function len(a) {  return a ? a.length : 0; }

let app = {
  events: [],
  nextFrom: 0,
  fetchData() {
    fetch(`/api/latestevents?nextFrom=${this.nextFrom}`)
      .then((res) => res.json())
      .then((data) => {
        const n = len(data.events);
        console.log(`fetchData(): got ${n} events`);
        if (n == 0) {
          return;
        }
        this.events.push(...data.events);
        if (n > kMaxEvents) {
          const toRemove = n - kMaxEvents;
          this.events.splice(0, toRemove);
        }
        //this.nextFrom = data.nextFrom;
      });
  }
};
createApp(app).mount()
console.log("created and mounted the app");
const fetchData = app.fetchData.bind(app);
window.setInterval(fetchData, 3000);
</script>
</head>

<body>
  <p>This is analytics for the poor, by the poor.</p>
  <div v-scope v-effect="fetchData()">
    <p>Latest events:</p>
    <template v-for="event in events">
      <div>event: {{ event }}</div>
    </template>
  </div>
</body>

I verified in the debugger that fetchData() is being called multiple times and this.events changes but v-for="event in events" only renders after the first fetchData().

Admittedly I don't know Vue much so I'm likely missing something obvious. I was just going from the docs in https://github.com/vuejs/petite-vue#readme

Things I tried

<template v-effect="events" v-for="event in events"> : the docs say that v-effect observes events and will re-run if it changes.

<div v-scope v-effect="events && fetchData()"> : the same thinking as above, thinking that since I've added events, it'll re-run

I created reactive store and used that in template and would set it to new value in fetchData(). Didn't re-render either.

Big question

How can I make my v-for="event in events" re-render when events change?

Little question

What also puzzled me was: if I un-commented this.nextFrom = data.nextFrom; at the end of fetchData(). it would immediately call fetchData() again.

I don't understand why because v-effect doesn't refer to nextFrom. I further don't understand why setting this.events inside fetchData() doesn't have the same effect of re-running fetchData().

Updated, stand-alone version

This is updated, self-contained version that doesn't go to the network.

Still, doesn't re-render even though eventsCount and events do change.

  <script type="module">
    import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
    const kMaxEvents = 256;
    function len(a) {
      return a ? a.length : 0;
    }

    let app = {
      events: [],
      nextFrom: 0,
      eventsCount: 0,
      updateData(data) {
        const n = len(data.events);
            if (n == 0) { return; }
            this.events.push(...data.events);
            if (n > kMaxEvents) {
              const toRemove = n - kMaxEvents;
              this.events.splice(0, toRemove);
            }
            //this.nextFrom = data.nextFrom;
            this.eventsCount = len(this.events);
            console.log(`updateData(): got ${n} events, eventsCount: ${this.eventsCount}`);
      },
      fetchData() {
        if (true) {
          const data = {
            events: ["foo"],
            nextFrom: 0,
          };
          this.updateData(data);
          return;
        }

        fetch(`/api/latestevents?nextFrom=${this.nextFrom}`)
          .then((res) => res.json())
          .then((data) => {
            this.updateData(data);
          });
      }
    };
    createApp(app).mount()
    app.fetchData();
    const fetchData = app.fetchData.bind(app);
    window.setInterval(fetchData, 3000);
  </script>
</head>

<body>
  <p>This is analytics for the poor, by the poor.</p>
  <div v-scope>
    <p>Latest {{ eventsCount }} events:</p>
    <div v-for="event in events">
      <div>event: {{ event }}</div>
    </div>

    <template v-for="event in events">
      <div>event: {{ event }}</div>
    </template>
  </div>
</body>