[Vuejs]-Why Nuxt 3 Not Updating Realtime Upon Data Change on Props?

by

1👍

I noticed a couple of issues here. It might help you.

First of all, you used the props keyword in the template, it’s not needed.

<!-- props.ranking -> ranking -->
<tr v-for="(datae, index) in ranking" :key="index">
  <td>{{ index }}</td>
  <td>{{ '(' + datae.username + ') ' + datae.realname }}</td>
  <td>{{ datae.blank }}</td>
  <td>{{ datae.error }}</td>
  <td>{{ datae.warning }}</td>
  <td>{{ datae.clean }}</td>
  <td>{{ datae.total }}</td>
</tr>

The second point is that you watch an array prop, but it isn’t changed, only the properties (items) of this array will be changed. So your watcher callback never fires. To fix this, you can pass the deep option to watch as a third argument, like this:

watch(() => props.ranking,
  (newValue, oldValue) => console.log('tes'),
  { deep: true }
)

Source: watch arrays

👤Aleksandr Savkin

Leave a comment