Vue js шаблон компонента не обновляется данными - PullRequest
Новая
       52

Vue js шаблон компонента не обновляется данными

0 голосов
/ 18 июня 2020

У меня странная проблема с некоторыми из моих Vue js компонентов, позвольте мне объяснить. Я визуализирую свой шаблон компонента только после того, как данные были инициализированы следующим образом: 

<template>
  <div>
    <div v-if='!isLoading'> 
      <!-- content -->
    </div>
    <div v-else>...</div>
  </div>
</template>

В созданном методе этого компонента я получаю некоторые данные из хранилища и устанавливаю isLoading как false, например. 

data() {
  return {
    variable: null,
    isLoading: true,
  }
},
created() {
  this.variable = this.$store.getters['someModule/someGetter']
  this.isLoading = false
}

Вот где происходит странное поведение. Несмотря на то, что в созданном методе я обновил переменную isLoading до false, шаблон компонента не обновляется.

Когда я записываю переменную isLoading в консоль в конце созданного метода, она регистрирует ложь, как будто я ее установил. Но когда я проверяю переменную isLoading в инструментах Vue js, она по-прежнему имеет значение true ...

Допустим, эти компоненты отображаются в '/ content'. Это странное поведение происходит, когда я меняю маршруты с «/» на «/ content». Когда я обновляю sh приложение на маршруте / content, этого не происходит. Когда я go от '/' к '/ other-content', а затем к '/ content', этого тоже не происходит.

Мы будем очень благодарны за любые идеи о том, почему это происходит.

Заранее спасибо и хорошего дня!

1 Ответ

0 голосов
/ 18 июня 2020

Есть тонкие различия между mounted и created в вашем случае, поскольку вы хотите манипулировать DOM, вы должны использовать mounted ловушку жизненного цикла. Этот ответ объясняет различия между двумя методами жизненного цикла.

...