2016-11-17 21 views
14

कूद संदर्भ के लिए मैं Vue 2.0, Vuex, और Firebase उपयोग कर रहा हूँ से कर्सर/कैरट रखने के लिए डोम ताज़ा को रोकने के।Vue.js v-एचटीएमएल contenteditable

मैं v-एचटीएमएल का उपयोग कर innerHTML रेंडर करने के लिए बाध्यकारी एक contenteditable घटक निर्माण कर रहा हूँ। डेटा को अद्यतन पर अद्यतन किया गया है। जब भी डेटा अपडेट किया जाता है तो DOM तत्व "नए" डेटा के साथ रीफ्रेश होता है, जिससे कैरेट/कर्सर संतोषजनक div की शुरुआत में वापस कूद जाता है।

मैं Rangy और कुछ अन्य stackoverflow समाधान में देखा है, लेकिन मुझे लगता है कि सबसे आसान समाधान डेटा ताज़ा से डोम तत्व निकल करने के लिए किया जाएगा। मैं डेटा को अभी भी फायरबेस में अपडेट करना चाहता हूं लेकिन नतीजतन एक तत्व ताज़ा नहीं होता है।

वहाँ एक रास्ता मुझे अभी भी v-एचटीएमएल का उपयोग लेकिन डेटा के साथ ताज़ा से डोम तत्व को रोकने के लिए के लिए है? या ऑटो बाध्यकारी के बिना एचटीएमएल प्रस्तुत करने का कोई और तरीका है?

संपादित करें: 11/18/16

तो मैं इस के लिए एक ठीक काम करना जारी रखा है। मेरे वर्तमान विचार यहां दिए गए हैं।

  1. lifecycle hook का उपयोग करें और घटक को पुनः प्रस्तुत करें। मैंने वू डॉक्स को देखा है लेकिन चक्र को रोकने के लिए कुछ नहीं ढूंढ रहा है।
  2. React’s “componentShouldRender” जैसे कुछ का उपयोग करें। फिर, ऐसा लगता है कि Vue.js की जीवन चक्र में तुलनीय विधि नहीं है।

किसी को भी किसी भी तरीकों जीवन चक्र समाप्त करने के लिए के जानता है, बंद करो फिर से प्रस्तुत करना, या प्रतिक्रिया Vue से बाहर के "componentShouldRender" कार्यक्षमता प्राप्त करने के लिए एक तरह से, वह पर्याप्त ठीक इस मुद्दे होना चाहिए।

-

अद्यतन: 11/29/16

यह अद्यतन एक छोटे से देर से आने के लिए है। मैंने feature request पर विथ ऑन विथ के साथ लॉग इन किया है।

मुद्दा चर्चा में कुछ JSFiddles जो एक potential solution प्रदान कर सके हैं। हालांकि उनमें से कोई भी मुझे विश्वास नहीं है कि एक पूर्ण समाधान के रूप में योग्यता प्राप्त है। एकमात्र आशाजनक व्यक्ति ने हाल ही में more issues अर्जित किया है।

इन समस्याओं के सभी एक componentShouldRender जीवन चक्र हुक के अलावा गैर मुद्दों होगा। मैं एक पूर्ण समाधान की तलाश जारी रखूंगा

+0

बनाने jsfiddle कृपया – euvl

+0

एक smiliar समस्या के लिए सर्च कर रहे हैं, मैं डॉक्स में इस पाया: https://vuejs.org/v2/guide/forms.html#lazy जाहिरा तौर पर आप जोड़ सकते हैं: आलसी करने के लिए अपने मॉडल के लिए केवल परिवर्तन घटनाओं पर अपडेट करने के लिए वी-मॉडल निर्देश। यह वही नहीं है जो आप खोज रहे हैं, लेकिन यह आपको – lkostka

+0

@lkostka को संभालने में मदद कर सकता है, यह वास्तव में '.lazy' है। लेकिन मैंने इसे बदलने के बिना कोशिश की:/ – Jason

उत्तर

-2

समस्या को समझने की समस्या यह है कि घटना प्रचार या बुलबुले हो जाती है, जिससे यह विरू को फिर से प्रस्तुत करता है जिससे क्रूजर की शुरुआत शुरू हो जाती है।

आपके खराब उदाहरण में setContent() विधि के अंदर event.preventDeafault(); लाइन जोड़कर काम करेगा।

अधिक जानकारी के लिए

- vue documentations में इनलाइन हैंडलर खंड में तरीके।

2

क्या मेरे लिए अभी भी v-html का उपयोग करने का कोई तरीका है लेकिन डेटा के साथ ताज़ा करने से DOM तत्व को रोकें?

हां। v-once निर्देश वास्तव में यह करता है।

https://vuejs.org/v2/api/#v-once