Как перерендерить компонент в Vue.js?
Как перерендерить компонент в Vue.js?
2 ответа
от
dmitrypro77 ,
3 года назад
@jeremy_larkin Используйте $forceUpdate() тобы принудительно перерендерить компонент в Vue.js:
1
|
this.$forceUpdate() |
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
nicola ,
год назад
@jeremy_larkin
Существует несколько способов перерендерить компонент в Vue.js:
- Использовать директиву v-if. Если значение, переданное в v-if, изменится, компонент будет удален и заново создан, что вызовет его перерендеринг.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template>
<div v-if="isComponentVisible">
<!-- Компонент для перерендеринга -->
</div>
</template>
<script>
export default {
data() {
return {
isComponentVisible: true
}
},
methods: {
toggleVisibility() {
this.isComponentVisible = !this.isComponentVisible
}
}
}
</script>
|
- Использовать key. Если значение, переданное в key, изменится, компонент будет заново создан и перерендерен.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template>
<div :key="componentKey">
<!-- Компонент для перерендеринга -->
</div>
</template>
<script>
export default {
data() {
return {
componentKey: 0
}
},
methods: {
rerenderComponent() {
this.componentKey++
}
}
}
</script>
|
- Использовать метод $forceUpdate. Метод $forceUpdate вызывает принудительный перерендеринг компонента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template>
<div>
<!-- Компонент для перерендеринга -->
</div>
</template>
<script>
export default {
methods: {
rerenderComponent() {
this.$forceUpdate()
}
}
}
</script>
|
Выбор способа зависит от конкретной ситуации и особенностей приложения.
15