Hanya pertanyaan singkat.

Bisakah Anda memaksa Vue.jsuntuk memuat ulang / menghitung ulang semuanya? Jika ya, bagaimana caranya?

Coba mantra ajaib ini:

vm.$forceUpdate();

Tidak perlu membuat vars gantung :)

Pembaruan: Saya menemukan solusi ini ketika saya baru mulai bekerja dengan VueJS. Namun eksplorasi lebih lanjut membuktikan pendekatan ini sebagai penopang. Sejauh yang saya ingat, dalam beberapa saat saya menyingkirkannya hanya menempatkan semua properti yang gagal menyegarkan secara otomatis (kebanyakan yang bersarang) ke dalam properti yang dihitung.

Info lebih lanjut di sini: https://vuejs.org/v2/guide/computed.html

Ini sepertinya solusi yang cukup bersih dari matthiasg untuk masalah ini :

Anda juga dapat menggunakan :key="someVariableUnderYourControl"dan mengubah kunci ketika Anda ingin komponen dibangun kembali sepenuhnya

Untuk kasus penggunaan saya, saya memberi makan pengambil Vuex ke komponen sebagai alat peraga. Entah bagaimana Vuex akan mengambil data tetapi reaktivitas tidak andal menendang untuk merender komponen. Dalam kasus saya, mengatur komponen keyke beberapa atribut pada prop dijamin refresh ketika getter (dan atribut) akhirnya diselesaikan.

Mengapa?

... apakah Anda perlu memaksakan pembaruan?

Mungkin Anda tidak menjelajahi Vue yang terbaik:

Agar Vue bereaksi secara otomatis terhadap perubahan nilai, objek pada awalnyadata harus dinyatakan dalam . Atau, jika tidak, mereka harus ditambahkan menggunakanVue.set() .

Lihat komentar di demo di bawah ini. Atau buka demo yang sama di JSFiddle di sini .

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>

Untuk menguasai bagian Vue ini, periksa Dokumen Resmi tentang Reaktivitas - Ubah Peringatan Deteksi . Ini harus dibaca!

Silakan baca ini http://michaelnthiessen.com/force-re-render/

Cara mengerikan: memuat ulang seluruh halaman
Cara mengerikan: menggunakan peretasan v-if
Cara yang lebih baik: menggunakan metode forceUpdate yang terintegrasi dengan Vue Cara
terbaik: mengubah kunci pada komponen Anda

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

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

Saya juga menggunakan arloji: dalam beberapa situasi.

Coba gunakan this.$router.go(0);untuk memuat ulang secara manual halaman saat ini.

Gunakan vm.$set('varName', value). Cari detail di Change_Detection_Caveats .

Tentu .. Anda cukup menggunakan atribut kunci untuk memaksa render (rekreasi) kapan saja.

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

Lihat https://jsfiddle.net/mgoetzke/epqy1xgf/ untuk contoh

Itu juga dibahas di sini: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

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

bersamaan dengan itu gunakan this.$set(obj,'obj_key',value) dan perbarui uniqueKeyuntuk setiap pembaruan dalam objek (obj) nilai untuk setiap pembaruanthis.uniqueKey++

ini bekerja untuk saya dengan cara ini

Jadi ada dua cara Anda bisa melakukan ini,

1). Anda dapat menggunakan $forceUpdate()di dalam handler metode Anda yaitu

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

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

2). Anda dapat memberikan :keyatribut ke komponen Anda dan meningkatkan ketika ingin rerender

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

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

menggunakan v-if direktif

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

Jadi hanya dengan mengubah nilai truevalue dari false ke true akan menyebabkan komponen antara div kembali rerender

Untuk memuat ulang / merender ulang / menyegarkan komponen, hentikan pengkodean yang panjang. Ada cara Vue.JS untuk melakukan itu.

Cukup gunakan :keyatribut.

Sebagai contoh:

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

Saya menggunakan yang di BS Vue Table Slot. Memberitahu bahwa saya akan melakukan sesuatu untuk komponen ini jadi buatlah menjadi unik.

Ini berhasil bagi saya.

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

Komponen lain yang mengaktifkan event refresh-store-list akan menyebabkan komponen saat ini rerender

Saya menemukan jalan. Agak berantakan tapi berhasil.

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

Di mana objek vmview-model Anda, dan xmerupakan variabel yang tidak ada.

Vue.js akan mengeluh tentang hal ini di log konsol tetapi memicu pembaruan untuk semua data. Diuji dengan versi 1.0.26.

Bekerja untukku

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

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

tambahkan saja kode ini:

this.$forceUpdate()

Semoga berhasil

: key = "$ route.params.param1" cukup gunakan kunci dengan params Anda yang mana pun anak-anak memuat ulang secara otomatis ..

Saya punya masalah dengan galeri gambar yang ingin saya rerender karena perubahan yang dilakukan pada tab yang berbeda. Jadi tab1 = imageGallery, tab2 = favoriteImages

tab @ change = "updateGallery ()" -> ini memaksa direktif v-for saya untuk memproses fungsi filteredImages setiap kali saya mengganti tab.

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

maaf kawan, kecuali metode pemuatan ulang halaman (berkedip), tidak ada yang berfungsi untuk saya (: kunci tidak berfungsi).

dan saya menemukan metode ini dari forum vue.js lama yang berfungsi untuk saya:

https://github.com/vuejs/Discussion/issues/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>