Попробуйте это волшебное заклинание:

vm.$forceUpdate();

Не нужно создавать никаких висячих варов :)

Обновление: Я нашел это решение, когда только начал работать с 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>

Чтобы освоить эту часть Vue, ознакомьтесь с Official Docs on Reactivity - Change Detection Caveats. Это обязательное чтение!

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

Пожалуйста, прочитайте это http://michaelnthiessen.com/force-re-render/

Ужасный путь: перезагрузка всей страницы <БР> Грозный способ: с помощью V-если рубить <БР> Лучший способ: используя Vue в встроенный способ forceUpdate <БР> Лучший способ: ключ-изменения в компоненте <БР>

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

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

Попробуйте использовать этот$.маршрутизатор.перейти(0);`, чтобы вручную обновить текущую страницу.

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

в<компонент MyComponent :ключ="и somevalueunderyourcontrol" и></компонент MyComponent>``

См

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

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

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

Так, просто изменив значение trulyvalue с false на True вызовет снова компонента между див повторно

Я нашел способ. Он немного хитрый, но работает.

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

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

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

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

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

Другой компонент пожаров обновить-магазинах-список событий приведет к текущему компоненту повторно

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

наряду с этим используют это.$набор(параметр obj,'obj_key',значение) и обновления uniqueKey для каждого обновления в объекте (Объект) значение за каждое обновление это.uniqueKey++

он работал для меня этот путь

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

Просто используйте `:ключевой атрибут.

Например:

<мой-компонент :ключ=на"уникальную" />

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

Другим способом является привлечение вю-маршрутизатор, которые обычно так или иначе используется в большинстве приложений.

Например, вам нужно обновить/обновление крючки причиной' исполнения на всех/только некоторые компоненты, к моменту выхода на страницу. Вы можете быть заинтересованы в обновлении не компонент маршрут (не используется в разделе маршрутизации как компонент's стоимостью имущества), поэтому навигация охранники не сработает. Также компонент может быть использован повторно, я имею в виду Vue может брать его из кэша, избегая срабатывания крючки жизненного цикла. Так что, в таком случае вы все еще можете достичь цели путем передачи уникальный Стоимость от маршрутизатора к компоненту маршрут

path: ":model",
name: "model",
component: MyComponent,
props: (route) => ({
    // other props...
    timestamp: + new Date()
})

Тогда вы должны принять этот реквизит как реквизит: ['метка']` в компоненте маршрут и пройти его вниз к компонентам ребенка, в каком обновлении вас интересует. Затем использовать его в качестве атрибута элемента или внутри невидимых тегов. Если вы Don'т использовать его в любом месте в шаблоне, это не вызовет каких-либо обновление, если у вас - каждый раз, когда вы нажмете, что маршрут уникальное значение генерируется и передается на маршрут компонента и его детей, где вы можете вызвать их обновление с помощью передаваемого через реквизит значение в шаблон.

:ключ=" по$маршрут.параметры.параметр1" просто использовать ключ с задать любые параметры своего авто релоад детей..

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

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

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

Я имел эту проблему с фотографией, что я хотел повторно в связи с изменениями, внесенными на другую вкладку. Так вкладке tab1 = imageGallery, таб2 = favoriteImages

вкладку изменить=на&[email protected]; updateGallery () на" -> это заставляет мой V-для директивы для обработки функции filteredImages каждый раз, когда я переключения вкладок.

<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>