आप पुनः लोड / पुनः प्रस्तुत करने के लिए Vue.js को मजबूर कर सकते हैं?

Question

बस एक त्वरित प्रश्न।

क्या आप सब कुछ पुनः लोड / पुनर्गणनाVue.js करने के लिए मजबूर कर सकते हैं ? यदि हां, तो कैसे?

Comments

यहाँ बेहतर समर्थन मिल सकता है github.com/vuejs/Discussion/issues

— Cory Danielson

महान, उस चर्चा स्थल के बारे में नहीं जानते थे। मैं वहाँ पर कोशिश करता हूँ।

— डेव

क्या आपको प्रतिक्रिया मिल रही है? मैं भी जानने के लिए उत्सुक हूं।

— Oddman

बिल्कुल याद नहीं है। लेकिन यहाँ इस मुद्दे को मैंने कुछ सुरागों के साथ खोला है: github.com/vuejs/Discussion/issues/356

— Dave

मेरे पास दृश्य में v- के लिए निर्देश है और मामले का उपयोग तब करता है जब मैं मैन्युअल रूप से उस ऑब्जेक्ट पर दो ऑब्जेक्ट स्वैप करता हूं। Vue स्वचालित रूप से इसके बाद टेम्पलेट को रेंडर नहीं करता है। मैंने वर्कअराउंड का उपयोग किया: बस इस एरे के साथ कोई क्रिया करें (खाली ऑब्जेक्ट को धक्का दें और फिर ब्याह करें) - यह रेंडरर को ट्रिगर करता है। लेकिन यह विशेष मामला है।

— फ्योदोर ख्रुश्चेव

Answer 1

इस जादुई मंत्र का प्रयास करें:

vm.$forceUpdate();

किसी भी हैंगिंग वर्जन को बनाने की आवश्यकता नहीं है :)

अद्यतन: मुझे यह समाधान तब मिला जब मैंने केवल VueJS के साथ काम करना शुरू किया। हालाँकि आगे की खोज ने इस दृष्टिकोण को बैसाखी के रूप में सिद्ध किया। जहाँ तक मुझे याद है, कुछ ही समय में मैंने इससे छुटकारा पा लिया, बस उन सभी गुणों को डाल दिया, जो स्वचालित रूप से (ज्यादातर नेस्टेड) ​​को संपीड़ित गुणों में ताज़ा करने में विफल रहे।

अधिक जानकारी यहां: https://vuejs.org/v2/guide/computed.html

Comments

यह वास्तव में मेरी मदद करता है जब मैं इसे Vue में एक प्रपत्र विज़ार्ड घटक के साथ उपयोग कर रहा था। मेरे फॉर्म फ़ील्ड फ़ील्ड राज्य खो रहे थे, हालांकि डेटा चर बरकरार थे। अब जब मैं वापस जाता हूं तो विचारों को ताज़ा करने के लिए इसका उपयोग कर रहा हूं, मुझे इसे सेट टाइमआउट फ़ंक्शन में रखना था।

— जिमी इलेनॉला

ध्यान दें कि vue फ़ाइलों में आपको इसकी आवश्यकता है। $ forceUpdate ();)

— कटिंका हेसेलिंक

यह एक लंबी अक्षीय कॉल के बाद अद्यतन करने के लिए बहुत अच्छा काम करता है।

— अल्फ्रेडब्र

कुछ बिल्कुल अजीब तरीके से $forceUpdate()कभी भी मेरे लिए 2.5.17 पर काम नहीं किया।

— अबाना क्लारा

@AbanaClara $ forceUpdate () कभी भी एक सार्वजनिक तरीका नहीं था, मैंने पाया कि यह Vue के स्रोत कोड को खोद रहा है। और चूंकि इसका उपयोग कभी भी वीयूइंग का सही तरीका नहीं था, शायद इसे छीन लिया जाए। यकीन है कि अगर यह अभी भी वहाँ है के लिए नहीं कह सकता, क्योंकि मैं अब और आगे अंत नहीं है।

— बोरिस मोसूनोव

Answer 2

यह इस मुद्दे पर matthiasg से एक बहुत साफ समाधान की तरह लगता है :

:key="someVariableUnderYourControl"जब आप कंपोनेंट को पूरी तरह से फिर से बनाना चाहते हैं तो आप कुंजी का उपयोग और बदल सकते हैं

मेरे उपयोग के मामले के लिए, मैं एक प्रोप में एक घटक में एक Vuex गेट्टर खिला रहा था। किसी भी तरह Vuex डेटा को लाएगा, लेकिन प्रतिक्रियाशीलता मज़बूती से घटक को रेंडर करने के लिए किक नहीं करेगी। मेरे मामले में, keyप्रोप पर कुछ विशेषता के लिए घटक की स्थापना एक रिफ्रेश की गारंटी देती है जब गेटर्स (और विशेषता) अंततः हल हो जाती है।

Comments

यह एक साफ छोटी चाल है, यह मूल रूप से घटक के पुन: तात्कालिकता को बल देता है ( mountedचलाया जाएगा, आदि)

— btk

@btk मैं सहमत हूं, यह शायद चीजों को करने का "सही 'तरीका नहीं है, लेकिन यह एक साफ-सुथरी हैक है, जो भी इसके लिए है।

— ब्रायन कुंग

यह मददगार है। जब मार्ग परिवर्तित होता है तो मैं उसी घटक को पुन: भेजने के लिए मार्ग का उपयोग करता हूं। : की = "$ मार्ग।फुटपाथ"

— नीरव गांधी

Answer 3

क्यों?

... क्या आपको अपडेट को बाध्य करने की आवश्यकता है?

शायद आप इसकी सबसे अच्छी खोज नहीं कर रहे हैं:

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 के इस भाग में महारत हासिल करने के लिए, प्रतिक्रियाशीलता पर आधिकारिक डॉक्स - चेक डिटेक्शन कैविट्स बदलें । इसे अवश्य पढ़ना चाहिए!

Comments

निश्चित रूप से सहमत हैं कि आपको इस ताज़ा आवश्यकता पर सवाल उठाना चाहिए, लेकिन कभी-कभी आपको यूआई को फिर से प्रस्तुत करने की आवश्यकता होती है क्योंकि व्यूपोर्ट बदल गया है और आपको अलग-अलग संपत्ति (एक उदाहरण के रूप में) दिखाने की आवश्यकता है। डेटा वास्तव में बदल नहीं सकता है।

— the_dude_abides

आपको पुनः लोड करने की आवश्यकता क्यों है? कुछ मामलों में ब्राउज़र द्वारा कैश की गई संसाधन फाइलें (स्टाइलशीट / जेएस) को निश्चित अवधि के बाद फिर से लोड करना पड़ता है। मेरे पास एक स्टाइलशीट थी जिसे 7 दिनों के बाद फिर से लोड करने की आवश्यकता थी और यदि उपयोगकर्ता ने पेज एक्सेस के साथ एक टैब खुला रखा और 7 दिनों के बाद वापस आकर उस पेज को नेविगेट किया, तो सीएसएस 7 दिनों से अधिक पुराना था।

— अरोवरता

@AchielVolckaert आपको शायद पहले ही जवाब मिल गया है, लेकिन हां, Vue.set()घटकों के अंदर भी काम करता है।

— acdcjunior

@the_dude_abides और @ अर्रोवटा, वे ताज़ा करने के वैध उपयोग हैं, मैं सहमत हूँ। मैंने जो सवाल उठाया वह यह है कि लोग शायद ही कभी गलत कारणों से रिफ्रेशिंग न करें।

— acdcjunior

शायद आप केवल खराब तरीके से डिज़ाइन किए गए वेब ऐप में बग को ठीक करने का प्रयास कर रहे हैं जो विशुद्ध रूप से एक रेंडरिंग टूल के रूप में उपयोग करता है, और उदाहरण के लिए जब भी सर्वर में जाता है, तो क्लाइंट के एप्लिकेशन क्षमताओं की अनदेखी करते हुए पूरे एप्लिकेशन को पुनः लोड करता है। वास्तविक दुनिया में, आपके पास हमेशा आपके द्वारा खोजे गए हर घृणा को ठीक करने का समय नहीं होता है।

— वॉरेन डेव

Answer 4

कृपया इसे पढ़ें http://michaelnthiessen.com/force-re-render/

भयानक तरीका: पूरे पृष्ठ को पुनः लोड करना
भयानक तरीका: v-if हैक
का उपयोग करना बेहतर तरीका: Vue के अंतर्निहित बल प्रयोग विधि
का उपयोग करना सबसे अच्छा तरीका है: आपके घटक पर की-चेंजिंग

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

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

मैं भी घड़ी का उपयोग करता हूं: कुछ स्थितियों में।

Comments

बिल्कुल, मैं आपसे सहमत हूँ!

— डायमंड

मैंने लगभग Vue पर हार मान ली। लेकिन इसके लिए धन्यवाद, Vue में मेरा विश्वास बहाल हो गया है।

— जोक

लिंक वास्तव में यह नहीं दिखाता है कि इसे भयानक तरीके से कैसे किया जाए, जो कि दुर्भाग्यवश मेरी ज़रूरत है क्योंकि मेरे ऐप को भयानक तरीके से नेविगेट करने के लिए डिज़ाइन किया गया है। वर्तमान पृष्ठ का एक साधारण URL काम नहीं कर रहा है, कम से कम उस ऐप में नहीं, जिसके साथ मैं काम कर रहा हूं, इसलिए मुझे वास्तव में इसे भयानक तरीके से करने के लिए निर्देशों की आवश्यकता है।

— वारेन ड्यू

@ArrenDew कृपया अनुसरण करें: stackoverflow.com/questions/3715047/…

— यश

Answer 5

this.$router.go(0);वर्तमान पृष्ठ को मैन्युअल रूप से पुनः लोड करने के लिए उपयोग करने का प्रयास करें ।

Comments

सरल: यह $ राऊटर.गो ()

— मारियस

वास्तव में @ मारीअरेन्डियाना - .go () फ़ंक्शन को 1 गैर-वैकल्पिक पैरामीटर की आवश्यकता होती है

— a_lovelace

Answer 6

का उपयोग करें vm.$set('varName', value)। Change_Detection_Caveats में विवरण देखें ।

Answer 7

ज़रूर .. आप किसी भी समय फिर से प्रस्तुत करने (मनोरंजन) के लिए मजबूर करने के लिए प्रमुख विशेषता का उपयोग कर सकते हैं।

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

एक उदाहरण के लिए https://jsfiddle.net/mgoetzke/epqy1xgf/ देखें

यहां भी चर्चा की गई: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

Answer 8

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

इसके साथ ही यह हर अपडेट के लिए ऑब्जेक्ट (obj) वैल्यू में हर this.$set(obj,'obj_key',value) अपडेट के uniqueKeyलिए उपयोग और अपडेट करता हैthis.uniqueKey++

इसने मेरे लिए इस तरह से काम किया

Answer 9

तो ऐसा करने के दो तरीके हैं,

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>

Answer 10

v-if निर्देश का उपयोग करना

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

तो बस असत्य से असत्य के मूल्य को बदलकर सत्य को फिर से भाजक के बीच के घटक का कारण बनेगा

Comments

मेरी राय में यह घटक को फिर से लोड करने का सबसे साफ तरीका है। निर्मित में () विधि आप कुछ इनिशियलाइज़ेशन सामान जोड़ सकते हैं।

— पियोट्र 7ak

Answer 11

घटक को पुनः लोड / री-रेंडर / रीफ़्रेश करने के लिए, लंबे कोडिंग को रोकें। ऐसा करने का एक Vue.JS तरीका है।

बस :keyविशेषता का उपयोग करें ।

उदाहरण के लिए:

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

मैं उस एक का प्रयोग कर रहा हूँ BS Vue Table Slot। यह बताते हुए कि मैं इस घटक के लिए कुछ करूंगा ताकि यह अद्वितीय हो।

Answer 12

इसने मेरे लिए काम किया है।

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

अन्य घटक ताज़ा करता है स्टोर-सूची की घटना वर्तमान घटक को रेंडर करने का कारण बनेगी

Answer 13

मुझे एक रास्ता मिल गया है। यह थोड़ा हैकी है लेकिन काम करता है।

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

vmआपका दृश्य-मॉडल ऑब्जेक्ट कहां है, और xएक गैर-मौजूद चर है।

Vue.js कंसोल लॉग में इसके बारे में शिकायत करेंगे लेकिन यह सभी डेटा के लिए एक ताज़ा ट्रिगर करता है। 1.0.26 संस्करण के साथ परीक्षण किया गया।

Answer 14

मेरे लिए काम किया

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

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

Answer 15

बस इस कोड को जोड़ें:

this.$forceUpdate()

शुभ लाभ

Answer 16

: key = "$ path.params.param1" बस अपने किसी भी परम के साथ कुंजी का उपयोग करें अपने बच्चों को फिर से लोड करें ।।

Comments

अपने समाधान के बारे में विस्तृत जानकारी देने का प्रयास करें। अपना कोड जोड़ें, कीवर्ड को उजागर करें

— Agilanbu

Answer 17

मेरे पास एक छवि गैलरी के साथ यह मुद्दा था जिसे मैं एक अलग टैब पर किए गए परिवर्तनों के कारण रेंडर करना चाहता था। तो tab1 = imageGallery, tab2 = पसंदीदाइमेज

टैब @ परिवर्तन = "अपडेटगैलरी ()" -> यह मेरे वी-फॉर निर्देश को फ़िल्टर किए गए फ़ंक्शन को हर बार जब मैं टैब स्विच करता है, संसाधित करने के लिए मजबूर करता है।

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

Answer 18

क्षमा करें, पृष्ठ पुनः लोड विधि (टिमटिमाते हुए) को छोड़कर, उनमें से कोई भी मेरे लिए काम नहीं करता है: (कुंजी काम नहीं किया)।

और मुझे पुरानी v..ss फोरम से यह विधि मिली जो मेरे लिए काम कर रही है:

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>