vue3 reactive api in deep object can not re-render

Question

template:

<div>
      <label class="label">balance</label>
      <h3 class="title is-4">${{ lobby.balance }}</h3>
</div>

code:

setup() {
  const state = reactive({
     lobby: {},
  });

  state.lobby = new Lobby(); //settimeout change balance in constructor is not re-render

  setTimeout(() => {
    state.lobby.balance = 123; // re-render is work
  }, 1000);

  return {
    ...toRefs(state),
  };
}

Why isn't the balance change in the Lobby constructor reactive?

tony19 · Accepted Answer · 2020-10-05 06:04:41Z

2

This would happen when Lobby()'s balance property is not declared as a ref:

class Lobby {
  balance = 0 // ❌ not a ref

  constructor() {
    setTimeout(() => {
      this.balance = 100 // ❌ not a ref, so no reactive
    }, 500)
  }
}

The solution would be to declare balance as a ref:

import { ref } from 'vue'

class Lobby {
  balance = ref(0) // 👈

  constructor() {
    setTimeout(() => {
      this.balance.value = 100 // 👈
    }, 500)
  }
}

demo

answered Oct 5, 2020 at 6:04

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue3 reactive api in deep object can not re-render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related