Coba ini mantra sihir:

vm.$forceUpdate();

Tidak perlu untuk membuat setiap gantung vars :)

Update: saya menemukan solusi ini ketika saya mulai kerja dengan VueJS. Namun eksplorasi lebih lanjut membuktikan pendekatan ini sebagai penopang. Sejauh yang saya ingat, di saat aku menyingkirkan itu hanya menempatkan semua sifat yang gagal untuk me-refresh secara otomatis (sebagian besar bersarang orang-orang) menjadi computed properti.

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

Ini sepertinya solusi yang bersih dari matthiasg pada masalah ini:

anda juga dapat menggunakan :key="someVariableUnderYourControl" dan mengubah kunci bila anda ingin komponen harus benar-benar dibangun kembali

Saya menggunakan hal ini, saya makan Vuex pengambil menjadi komponen sebagai prop. Entah bagaimana Vuex akan mengambil data tersebut tetapi reaktivitas tidak't andal menendang ke rerender komponen. Dalam kasus saya, pengaturan komponen kunci untuk beberapa atribut pada prop dijamin menyegarkan ketika getter (dan atribut) akhirnya diselesaikan.

Mengapa?

...apakah anda butuh ** untuk memaksa update?

Mungkin anda tidak menjelajahi Vue yang terbaik:

Untuk memiliki Vue secara otomatis bereaksi terhadap perubahan-perubahan nilai, benda-benda yang harus awalnya dinyatakan dalam data. Atau, jika tidak, mereka harus ditambahkan menggunakan Vue.set().

Lihat komentar pada demo di bawah ini. Atau buka [sama demo di a JSFiddle di sini][1].

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>
  this.person.name = 'Arantes'; (will auto update because `name` was in `data`)<br>
  this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)<br>
  Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on Reactivity (link below).
</div>

Untuk menguasai hal ini bagian dari Vue, cek Resmi Docs pada Reaktivitas - Perubahan Deteksi Peringatan. Ini adalah harus dibaca!

Gunakan vm.$set('varName', nilai). Lihat detail ke Change_Detection_Caveats.

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

Mengerikan cara: reload seluruh halaman
Mengerikan cara: menggunakan v-apakah hack
Cara yang lebih baik: menggunakan Vue built-in forceUpdate metode
Cara terbaik: kunci-perubahan pada komponen

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

Saya juga menggunakan watch: dalam beberapa situasi.

Cobalah untuk menggunakan ini.$router.pergi(0); untuk secara manual reload halaman saat ini.

Yakin .. anda hanya dapat menggunakan atribut kunci untuk memaksa re-render (rekreasi) di setiap waktu.

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

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

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

menggunakan v-jika direktif

<div v-if="trulyvalue">

 </div>

Jadi hanya dengan mengubah nilai trulyvalue dari false ke true akan menyebabkan komponen antara div untuk rerender lagi

Saya menemukan sebuah cara. It's sedikit hacky tetapi bekerja.

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

Di mana vm yang anda lihat-model obyek, dan x adalah tidak ada variabel.

Vue.js akan mengeluh tentang hal ini di console log tetapi tidak memicu refresh untuk semua data. Diuji dengan versi 1.0.26.

Ini telah bekerja untuk saya.

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

Komponen lain api refresh-toko-daftar acara yang akan menyebabkan komponen arus untuk rerender

selain itu menggunakan ini.$set(obj,'obj_key',nilai) dan update uniqueKey untuk setiap update di objek (obj) nilai untuk setiap update ini.uniqueKey++

ini bekerja untuk saya dengan cara ini

Dalam rangka ulang/re-render/refresh komponen, berhenti lama codings. Ada Vue.JS cara untuk melakukan itu.

Hanya menggunakan :key atribut.

Misalnya:

``

Saya menggunakan yang satu di B Vue Slot Meja. Mengatakan bahwa aku akan melakukan sesuatu untuk komponen ini sehingga membuatnya unik.

Cara lain adalah dengan melibatkan vue-router yang biasanya digunakan pula dalam sebagian besar aplikasi.

Misalnya, anda perlu me-refresh/penyebab update kait' eksekusi pada semua/hanya beberapa komponen setelah masuk ke halaman. Yang dapat anda tertarik dalam memperbarui bukan rute komponen (tidak digunakan dalam routing bagian sebagai komponen's nilai properti), sehingga navigasi penjaga tidak akan memicu. Juga komponen yang dapat digunakan kembali, maksud saya Vue dapat mengambilnya dari cache menghindari memicu siklus hidup kait. Jadi, dalam kasus seperti itu anda masih dapat mencapai tujuan dengan melewati unik nilai dari router ke rute komponen seperti

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

Maka anda harus menerima prop ini seperti alat peraga: ['timestamp'] di rute komponen dan menyebarkannya ke anak dalam komponen-komponen yang update anda tertarik. Kemudian gunakan itu ada sebagai atribut pada elemen atau di dalam tag terlihat. Jika anda don't menggunakannya di mana saja di template, itu tidak akan menimbulkan update, jika anda lakukan - setiap kali anda menekan rute itu nilai unik yang dihasilkan dan berlalu ke rute komponen dan anak-anak di mana anda dapat menyebabkan mereka update dengan menggunakan dilewatkan melalui alat peraga nilai dalam template.

:kunci="$route.params.param1" hanya menggunakan kunci dengan anda setiap params auto reload anak-anak..

Bekerja untuk saya

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

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

Aku punya masalah ini dengan sebuah galeri gambar yang saya ingin rerender karena perubahan yang dibuat pada tab yang berbeda. Jadi tab1 = imageGallery, tab2 = favoriteImages

tab @perubahan="updateGallery()" -> ini pasukan saya v-untuk direktif untuk proses filteredImages fungsi setiap kali saya beralih 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>