Vuejs не обновляет мой интерфейс, кто-нибудь знает почему?

Question

У меня есть приложение с vuejs. У меня есть объект, который обновляется из API каждые 10 секунд, он также должен изменить Html (интерфейс) при обновлении.

У меня возникают некоторые трудности при обновлении интерфейса, хотя я вижу, как объект меняется в консоли, поэтому я знаю, что он меняется.

Вот фрагмент моего кода:

watch: {
  myObj() {
    for (let [key, tuner] of Object.entries(myObj)) {
    ---- some code ----
     }
  }
 },
},
created() {
 setInterval(this.callMyApi(), 10000);
},

Я вызываю свой API каждые 10 секунд, а затем использую свойство WATCH, чтобы проверить, когда изменяется myObj, и делать некоторые логи c с этим. Кто-нибудь может мне помочь?

Answer 1

Существует 2 компонента, которые чрезвычайно важны для обеспечения правильной работы объекта (особенно с вложенными свойствами).

Во-первых, вы должны либо A) создать экземпляр свойства как объекта, объявляя myObj: {} или B) используйте Vue.set(this, 'myObj', yourCustomObject) для обеспечения его реактивности.

Во-вторых, вы должны использовать deep: true, если ваш объект содержит вложенные объекты / массивы.

watch: {
  myObj: {
    deep: true, // this is the important part

    handler() {
      // your code
    }

  }
}