javascript vue.js

Вы можете заставить Vue.js для перезагрузки/повторного рендеринга?

Просто быстрый вопрос.

Вы можете заставить Vue.js чтобы обновить/пересчитать все? Если да, то как?

178
16
16 ответов

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

vm.$forceUpdate();

Не нужно создавать каких-либо висит Варс :)

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

Подробнее здесь: https://vuejs.org/v2/guide/computed.html

Это кажется довольно чистое решение из matthiasg на этой проблемы:

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

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

Почему?

...ты нужен для принудительного обновления?

Возможно, вы не исследуете Вуе в лучшем виде:

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

См. комментарии в демо ниже. Или откройте же демо в 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>

в

Чтобы освоить эту часть Вью, проверьте официальные документы на реакционная способность - изменить предупреждения, обнаружения. Это надо читать!

Используйте ВМ.$набор('переменная', значение). Ищите подробности в 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://jsfiddle.net/mgoetzke/epqy1xgf/ для примера

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

Я нашел способ. Это'немного суховато, но работает.

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

Где ВМ, на ваш взгляд-модель объекта, и X является несуществующей переменной.

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

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

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

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

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

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

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

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

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

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