Ответ 1

Попробуйте это магическое заклинание:

vm.$forceUpdate();

Не нужно создавать висящие vars:)

Обновление: Я нашел это решение, когда только начал работать с VueJS. Однако дальнейшая разведка доказала этот подход как костыль. Насколько я помню, через некоторое время я избавился от него, просто поместив все свойства, которые не смогли автоматически обновиться (в основном вложенные) в вычисленные свойства.

Дополнительная информация здесь: https://vuejs.org/v2/guide/computed.html

Ответ 2

Это похоже на довольно чистое решение от matthiasg по этому вопросу:

Вы также можете использовать :key="someVariableUnderYourControl" и изменить ключ, когда вы хотите полностью перестроить компонент

Для моего случая использования я подал геттер Vuex в компонент в качестве опоры. Каким-то образом Vuex будет извлекать данные, но реактивность не будет надежно задействована для повторной визуализации компонента. В моем случае установка для компонента key какого-либо атрибута на опоре гарантировало обновление, когда получатели (и атрибут) окончательно разрешаются.

Ответ 3

Зачем?

... вам нужно форсировать обновление?

Возможно, вы не исследуете 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>

Ответ 4

Используйте vm.$set('varName', value). Найдите подробности в Change_Detection_Caveats.

Ответ 5

Пожалуйста, прочитайте это 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>

Я также использую часы: в некоторых ситуациях.

Ответ 6

Попробуйте использовать this.$router.go(0); вручную перезагрузить текущую страницу.

Ответ 7

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

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

См. Https://jsfiddle.net/mgoetzke/epqy1xgf/ для примера.

Это также обсуждалось здесь: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

Ответ 8

используя директиву v-if

<div v-if="trulyvalue">
    <component-here />
 </div>

Таким образом, простое изменение значения truevalue с false на true вызовет повторное рендеринг компонента между div.

Ответ 9

Я нашел способ. Это немного хаки, но работает.

vm.$set("x",0);
vm.$delete("x");

Где vm - ваш объект модели представления, а x - несуществующая переменная.

Vue.js будет жаловаться на это в журнале консоли, но он вызывает обновление для всех данных. Протестировано с версией 1.0.26.

Ответ 10

Это сработало для меня.

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

Другой компонент запускает событие refresh-stores-list, что приведет к перерисовке текущего компонента.

Ответ 11

: key = "$ route.params.param1" просто используйте ключ с любыми параметрами для его автоматической перезагрузки потомков.

Ответ 12

Работал для меня

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

Ответ 13

У меня была эта проблема с галереей изображений, которую я хотел отрендерить из-за изменений, внесенных на другой вкладке. Итак, 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>

Ответ 14

Для перезагрузки/повторного рендеринга/обновления компонента остановите длинное кодирование. Для этого есть способ Vue.JS.

Просто используйте атрибут :key.

Например:

<my-component :key="unique" />

Я использую его в слоте BS Vue Table. Сказать, что я сделаю что-то для этого компонента, чтобы сделать его уникальным.