Просто быстрый вопрос.
Можете ли вы заставить Vue.js перезагрузить/пересчитать все? Если да, то как?
Просто быстрый вопрос.
Можете ли вы заставить Vue.js перезагрузить/пересчитать все? Если да, то как?
Попробуйте это магическое заклинание:
vm.$forceUpdate();
Не нужно создавать висящие vars:)
Обновление: Я нашел это решение, когда только начал работать с VueJS. Однако дальнейшая разведка доказала этот подход как костыль. Насколько я помню, через некоторое время я избавился от него, просто поместив все свойства, которые не смогли автоматически обновиться (в основном вложенные) в вычисленные свойства.
Дополнительная информация здесь: https://vuejs.org/v2/guide/computed.html
Это похоже на довольно чистое решение от matthiasg по этому вопросу:
Вы также можете использовать
:key="someVariableUnderYourControl"
и изменить ключ, когда вы хотите полностью перестроить компонент
Для моего случая использования я подал геттер Vuex в компонент в качестве опоры. Каким-то образом Vuex будет извлекать данные, но реактивность не будет надежно задействована для повторной визуализации компонента. В моем случае установка для компонента key
какого-либо атрибута на опоре гарантировало обновление, когда получатели (и атрибут) окончательно разрешаются.
... вам нужно форсировать обновление?
Возможно, вы не исследуете Vue в лучшем виде:
Чтобы Vue автоматически реагировал на изменения значений, объекты должны быть первоначально объявлены в
data
. Или, если нет, они должны быть добавлены с помощьюVue.set()
.
Смотрите комментарии в демоверсии ниже. Или откройте ту же демонстрацию в JSFiddle здесь.
new Vue({
el: '#app',
data: {
person: {
name: 'Edson'
}
},
methods: {
changeName() {
// because name is declared in data, whenever it
// changes, Vue automatically updates
this.person.name = 'Arantes';
},
changeNickname() {
// because nickname is NOT declared in data, when it
// changes, Vue will NOT automatically update
this.person.nickname = 'Pele';
// although if anything else updates, this change will be seen
},
changeNicknameProperly() {
// when some property is NOT INITIALLY declared in data, the correct way
// to add it is using Vue.set or this.$set
Vue.set(this.person, 'address', '123th avenue.');
// subsequent changes can be done directly now and it will auto update
this.person.address = '345th avenue.';
}
}
})
/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }
<script src="https://unpkg.com/vue"></script>
<div id="app">
<span>person.name: {{ person.name }}</span><br>
<span>person.nickname: {{ person.nickname }}</span><br>
<span>person.address: {{ person.address }}</span><br>
<br>
<button @click="changeName">this.person.name = 'Arantes'; (will auto update because 'name' was in 'data')</button><br>
<button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because 'nickname' was not in 'data')</button><br>
<button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though 'address' was not in 'data')</button>
<br>
<br>
For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>
Используйте vm.$set('varName', value)
. Найдите подробности в Change_Detection_Caveats.
Пожалуйста, прочитайте это http://michaelnthiessen.com/force-re-render/
Ужасный путь: перезагрузка всей страницы
Ужасный путь: использование взлома v-if
Лучший способ: использование встроенного метода Vues forceUpdate
Лучший способ: смена ключа на вашем компоненте
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>
Я также использую часы: в некоторых ситуациях.
Попробуйте использовать this.$router.go(0);
вручную перезагрузить текущую страницу.
Конечно, вы можете просто использовать ключевой атрибут для принудительного повторного рендеринга (воссоздания) в любое время.
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
См. Https://jsfiddle.net/mgoetzke/epqy1xgf/ для примера.
Это также обсуждалось здесь: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
используя директиву v-if
<div v-if="trulyvalue">
<component-here />
</div>
Таким образом, простое изменение значения truevalue с false на true вызовет повторное рендеринг компонента между div.
Я нашел способ. Это немного хаки, но работает.
vm.$set("x",0);
vm.$delete("x");
Где vm
- ваш объект модели представления, а x
- несуществующая переменная.
Vue.js будет жаловаться на это в журнале консоли, но он вызывает обновление для всех данных. Протестировано с версией 1.0.26.
Это сработало для меня.
created() {
EventBus.$on('refresh-stores-list', () => {
this.$forceUpdate();
});
},
Другой компонент запускает событие refresh-stores-list, что приведет к перерисовке текущего компонента.
: key = "$ route.params.param1" просто используйте ключ с любыми параметрами для его автоматической перезагрузки потомков.
Работал для меня
data () {
return {
userInfo: null,
offers: null
}
},
watch: {
'$route'() {
this.userInfo = null
this.offers = null
this.loadUserInfo()
this.getUserOffers()
}
}
У меня была эта проблема с галереей изображений, которую я хотел отрендерить из-за изменений, внесенных на другой вкладке. Итак, tab1 = imageGallery, tab2 = любимые изображения
tab @change = "updateGallery()" → это заставляет мою директиву v-for обрабатывать функцию FilterImages при каждом переключении вкладок.
<script>
export default {
data() {
return {
currentTab: 0,
tab: null,
colorFilter: "",
colors: ["None", "Beige", "Black"],
items: ["Image Gallery", "Favorite Images"]
};
},
methods: {
filteredImages: function() {
return this.$store.getters.getImageDatabase.filter(img => {
if (img.color.match(this.colorFilter)) return true;
});
},
updateGallery: async function() {
// instance is responsive to changes
// change is made and forces filteredImages to do its thing
// async await forces the browser to slow down and allows changes to take effect
await this.$nextTick(function() {
this.colorFilter = "Black";
});
await this.$nextTick(function() {
// Doesnt hurt to zero out filters on change
this.colorFilter = "";
});
}
}
};
</script>
Для перезагрузки/повторного рендеринга/обновления компонента остановите длинное кодирование. Для этого есть способ Vue.JS.
Просто используйте атрибут :key
.
Например:
<my-component :key="unique" />
Я использую его в слоте BS Vue Table. Сказать, что я сделаю что-то для этого компонента, чтобы сделать его уникальным.