Hanya pertanyaan singkat.
Bisakah Anda memaksa Vue.js
untuk memuat ulang / menghitung ulang semuanya? Jika ya, bagaimana caranya?
Hanya pertanyaan singkat.
Bisakah Anda memaksa Vue.js
untuk memuat ulang / menghitung ulang semuanya? Jika ya, bagaimana caranya?
Jawaban:
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
$forceUpdate()
tidak pernah bekerja untuk saya di 2.5.17.
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 key
ke beberapa atribut pada prop dijamin refresh ketika getter (dan atribut) akhirnya diselesaikan.
mounted
akan dijalankan, dll)
... apakah Anda perlu memaksakan pembaruan?
Mungkin Anda tidak menjelajahi Vue yang terbaik:
Agar Vue bereaksi secara otomatis terhadap perubahan nilai, objek pada awalnya
data
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!
Vue.set()
juga berfungsi di dalam komponen.
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 uniqueKey
untuk 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 :key
atribut 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 :key
atribut.
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.
Saya menemukan jalan. Agak berantakan tapi berhasil.
vm.$set("x",0);
vm.$delete("x");
Di mana objek vm
view-model Anda, dan x
merupakan 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.
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>