Просто швидке запитання.

Чи можна змусити Vue.jsдо перевантажувальної / перераховувати всі? Якщо так, то як?

Спробуйте це магічне заклинання:

vm.$forceUpdate();

Не потрібно створювати жодних висячих вар :)

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

Більше інформації тут: https://vuejs.org/v2/guide/computed.html

Це здається досить чистим рішенням з матіаса з цього питання :

ви також можете використовувати :key="someVariableUnderYourControl"та змінювати ключ, коли ви хочете, щоб компонент був повністю відновлений

Для мого використання я підживлював геттер Vuex в складі в якості опори. Якось Vuex отримає дані, але реактивність не буде надійно реалізовувати компонент для відновлення. У моєму випадку встановлення компонента keyна якийсь атрибут на опорі гарантувало оновлення, коли getters (та атрибут) остаточно вирішили.

Чому?

... чи потрібно примушувати оновлення?

Можливо, ви не вивчаєте 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, перевірте Офіційні Документи про Реактивність - Зміни Піктограм виявлення . Це обов’язково читати!

Будь ласка, прочитайте цей http://michaelnthiessen.com/force-re-render/

Жахливий спосіб: перезавантаження всієї сторінки
Страшний спосіб: використання v-if hack
Кращий спосіб: використання вбудованого методу forceUpdate Vue
Найкращий спосіб: зміна ключа на вашому компоненті

<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);для перезавантаження поточної сторінки вручну.

Використовуйте vm.$set('varName', value). Шукайте деталі у Change_Detection_Caveats .

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

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

Див. Https://jsfiddle.net/mgoetzke/epqy1xgf/ для прикладу

Тут також обговорювалося: https://github.com/vuejs/Discussion/isissue/356#issuecomment-336060875

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

разом з ним використовуйте this.$set(obj,'obj_key',value) та оновлюйте uniqueKeyдля кожного оновлення значення об'єкта (obj) для кожного оновленняthis.uniqueKey++

це працювало для мене таким чином

Так що ви можете це зробити двома способами,

1). Ви можете використовувати $forceUpdate()всередині свого обробника методу, тобто

<your-component @click="reRender()"></your-component>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

2). Ви можете надати :keyатрибут своєму компоненту та поточному потоку, коли хочете зробити його

<your-component :key="index" @click="reRender()"></your-component>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

використовуючи директиву v-if

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

Отже, просто змінивши значення дійснозначного значення з хибного на істинне, знову призведе компонент між дівом

Для того, щоб перезавантажити / відновити / оновити компонент, зупиніть довгі кодування. Існує спосіб Vue.JS зробити це.

Просто використовуйте :keyатрибут.

Наприклад:

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

Я використовую цю в слоті BS Vue Table. Сказав, що я щось зроблю для цього компонента, щоб зробити його унікальним.

Це спрацювало на мене.

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

Інший компонент запускає подію оновлення-списку, що призведе до повторного відображення поточного компонента

Я знайшов спосіб. Це трохи хакі, але працює.

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

Де vmзнаходиться ваш об'єкт-модель перегляду, і xце неіснуюча змінна.

Vue.js поскаржиться на це у журналі консолі, але він запускає оновлення для всіх даних. Тестовано з версією 1.0.26.

Працювали для мене

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

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

просто додайте цей код:

this.$forceUpdate()

Щасти

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

У мене виникла ця проблема з галереєю зображень, яку я хотів повторно виправити через зміни, внесені на іншій вкладці. Отже tab1 = imageGallery, tab2 = favoriteImages

tab @ change = "updateGallery ()" -> це змушує мою директиву v-for обробляти функцію 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>

Вибачте, хлопці, окрім методу перезавантаження сторінки (мерехтіння), жоден з них не працює для мене (: ключ не працював).

і я знайшов цей метод із старого форуму vue.js, який працює для мене:

https://github.com/vuejs/Discussion/isissue/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>