Vue: v-if का उपयोग करके कार्यात्मक से गैर-कार्यात्मक घटक में स्वैप करने से v-data-* विशेषता नहीं बदलती है।

को निर्मित 2 मार्च 2020 · 3टिप्पणियाँ · स्रोत: vuejs/vue

संस्करण

2.6.11

प्रजनन लिंक

https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark

प्रजनन करने कि प्रक्रिया

टिक बॉक्स पर क्लिक करें।

क्या अपेक्षित है?

यह नीले रंग की पृष्ठभूमि के साथ "ब्लू बॉक्स" कहना चाहिए।

वास्तव में क्या हो रहा है?

यह बिना किसी पृष्ठभूमि रंग के "ब्लू बॉक्स" कहता है।

समस्या डेटा-वी-* विशेषता से उत्पन्न होती है जिसे ब्लू_ब्लॉक डिव के लिए फिर से सेट नहीं किया जा रहा है जब इसे स्वैप किया जाता है। यह अभी भी कार्यात्मक घटक में चाइल्ड डिव की data-v-* विशेषता का उपयोग कर रहा है। इस प्रकार CSS क्लास स्टाइलिंग लागू नहीं होती है।

https://imgur.com/a/gukDePJ

किसी कार्यात्मक घटक से किसी अन्य चीज़ में अदला-बदली करना उपयोगी है। उदाहरण के लिए एक अधिक जटिल घटक को स्वैप करने से पहले एक साधारण लोडिंग बार घटक दिखाते समय।

bug

स्रोत

StefanCardnell

सबसे उपयोगी टिप्पणी

मुझे लगता है कि अपडेट के दौरान Vue नोड्स को कैसे रीसायकल करता है, इससे इसका कुछ लेना-देना हो सकता है। वर्कअराउंड के रूप में, घटक और div दोनों में key जोड़ने से अपेक्षित व्यवहार प्राप्त होता है।