แค่คำถามด่วน
คุณสามารถบังคับVue.js
ให้โหลดซ้ำ / คำนวณใหม่ทุกสิ่งได้หรือไม่ ถ้าเป็นเช่นนั้นได้อย่างไร
แค่คำถามด่วน
คุณสามารถบังคับVue.js
ให้โหลดซ้ำ / คำนวณใหม่ทุกสิ่งได้หรือไม่ ถ้าเป็นเช่นนั้นได้อย่างไร
คำตอบ:
ลองใช้เวทย์มนตร์นี้:
vm.$forceUpdate();
ไม่จำเป็นต้องสร้าง vars ที่แขวนอยู่ :)
อัปเดต:ฉันพบโซลูชันนี้เมื่อฉันเริ่มทำงานกับ VueJS เท่านั้น อย่างไรก็ตามการสำรวจเพิ่มเติมพิสูจน์วิธีนี้เป็นไม้ยันรักแร้ เท่าที่ฉันจำได้ในขณะที่ฉันกำจัดมันเพียงแค่วางคุณสมบัติทั้งหมดที่ล้มเหลวในการรีเฟรชโดยอัตโนมัติ (ส่วนใหญ่ซ้อนกัน) ลงในคุณสมบัติที่คำนวณได้
ข้อมูลเพิ่มเติมที่นี่: https://vuejs.org/v2/guide/computed.html
$forceUpdate()
ไม่เคยทำงานให้ฉันใน 2.5.17
ดูเหมือนว่าวิธีการแก้ปัญหาที่สะอาดจากmatthiasgในประเด็นนี้ :
คุณยังสามารถใช้
:key="someVariableUnderYourControl"
และเปลี่ยนรหัสเมื่อคุณต้องการให้ส่วนประกอบสร้างใหม่ได้อย่างสมบูรณ์
สำหรับกรณีการใช้งานของฉันฉันได้ป้อน Vuex getter เป็นส่วนประกอบเป็นเสา ด้วยวิธีใดก็ตาม Vuex จะดึงข้อมูล แต่ปฏิกิริยาที่เกิดขึ้นไม่น่าเชื่อถือที่จะดึงองค์ประกอบออกมา ในกรณีของฉันการตั้งค่าองค์ประกอบkey
เป็นคุณลักษณะบางอย่างบนเสารับประกันการรีเฟรชเมื่อ getters (และคุณลักษณะ) ได้รับการแก้ไขในที่สุด
mounted
จะทำงาน ฯลฯ )
... คุณต้องการบังคับการอัปเดตหรือไม่
บางทีคุณอาจไม่ได้สำรวจ 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.set()
ยังใช้งานได้ในส่วนประกอบ
โปรดอ่าน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);
เพื่อโหลดหน้าปัจจุบันใหม่ด้วยตนเอง
แน่นอนว่า.. คุณสามารถใช้แอททริบิวคีย์เพื่อบังคับให้แสดงซ้ำ (นันทนาการ) ได้ตลอดเวลา
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
ดูhttps://jsfiddle.net/mgoetzke/epqy1xgf/เพื่อเป็นตัวอย่าง
มันยังถูกกล่าวถึงที่นี่: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
<my-component :key="uniqueKey" />
พร้อมกับมันใช้this.$set(obj,'obj_key',value)
และอัปเดตuniqueKey
สำหรับทุกการปรับปรุงในค่า Object (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>
ดังนั้นเพียงแค่เปลี่ยนค่าของค่าที่แท้จริงจากเท็จเป็นจริงจะทำให้ส่วนประกอบระหว่าง div เปลี่ยนเป็นอีกครั้ง
ในการรีโหลด / แสดงผลซ้ำ / รีเฟรชคอมโพเนนต์ให้หยุดการโค้ดแบบยาว มีวิธี Vue.JS ในการทำเช่นนั้น
เพียงใช้:key
แอตทริบิวต์
ตัวอย่างเช่น:
<my-component :key="unique" />
ฉันใช้อันนั้นใน BS Vue Table Slot บอกว่าฉันจะทำบางสิ่งบางอย่างสำหรับองค์ประกอบนี้เพื่อให้เป็นเอกลักษณ์
สิ่งนี้ได้ผลสำหรับฉัน
created() {
EventBus.$on('refresh-stores-list', () => {
this.$forceUpdate();
});
},
ส่วนประกอบอื่น ๆ ใช้ไฟเหตุการณ์ refresh-stores-list จะทำให้คอมโพเนนต์ปัจจุบันแสดงผลซ้ำ
ฉันพบวิธี มันค่อนข้างแฮ็ก แต่ใช้ได้
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" เพียงใช้รหัสกับ params ของคุณในการโหลดเด็กอัตโนมัติ ..
ฉันมีปัญหานี้กับแกลเลอรี่รูปภาพที่ฉันต้องการแสดงซ้ำเนื่องจากมีการเปลี่ยนแปลงในแท็บอื่น ดังนั้น tab1 = imageGallery, tab2 = FavoriteImages
tab @ change = "updateGallery ()" -> สิ่งนี้บังคับให้ v-for directive ของฉันประมวลผลฟังก์ชั่น 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/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>