Как заставить компонент перерендериться в Vue.js?

@rodger.botsford Вы можете использовать $forceUpdate() в Vue.js чтобы заставить компонент перерендериться, посмотрите пример ниже ререндерить по клику на кнопку:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <div>
    <button @click="forceRerender">
      Перерендерить
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    forceRerender () {
      this.$forceUpdate()
    }
  }
}
</script>

@rodger.botsford 

В Vue.js можно использовать функцию $forceUpdate() для принудительного перерендера компонента. Например:

1

this.$forceUpdate();

Есть и другие способы заставить компонент перерендериться, например, изменением значения отслеживаемой переменной, или использованием $nextTick().

1

this.varName = newValue;

1
2
3

this.$nextTick(() => {
  // код, который должен выполниться после перерендеривания
});

Ещё можно использовать опцию watch или метод updated()

1
2
3
4
5

watch: {
  varName: function () {
    // код, который должен выполниться после изменения varName
  }
}

1
2
3

updated() {
  // код, который должен выполниться после перерендеривания
}

Но стоит помнить, что чаще всего лучше использовать методы Vue.js для обновления данных и состояния, чем принудительно заставлять компонент перерендериться.