VueJs इनलाइन टेम्पलेट में हेरफेर और reinitialize यह

Question

इस सवाल VueJS re-compile HTML in an inline-template component के समान है और यह भी करने के लिए How to make Vue js directive working in an appended html element

दुर्भाग्य है कि प्रश्न में समाधान $compile के रूप में वर्तमान VueJS कार्यान्वयन के लिए अब और नहीं किया जा सकता हटा दिया गया था है।

मेरे उपयोग के मामले निम्नलिखित है:

मैं जो पेज manipulates और बाद में एक गतिविधि सक्रिय तीसरे पक्ष के कोड का उपयोग करने के लिए है। अब उस घटना के बाद निकाल दिया गया था, मैं वीयूजेएस को यह बताना चाहता हूं कि इसे वर्तमान डोम को फिर से शुरू करना चाहिए।

(तृतीय पक्ष जो शुद्ध जावास्क्रिप्ट में लिखा है एक उपयोगकर्ता एक पेज में नए विजेट जोड़ लिए अनुमति देता है)

https://jsfiddle.net/5y8c0u2k/

एचटीएमएल

<div id="app"> 
    <my-input inline-template> 
    <div class="wrapper"> 
    My inline template<br> 
    <input v-model="value"> 
    <my-element inline-template :value="value"> 
    <button v-text="value" @click="click"></button> 
    </my-element> 
    </div> 
    </my-input> 
</div> 

जावास्क्रिप्ट - VueJS 2.2

Vue.component('my-input', { 
    data() { 
     return { 
      value: 1000 
     }; 
    } 
}); 

Vue.component('my-element', { 
    props: { 
     value: String 
    }, 
    methods: { 
     click() { 
      console.log('Clicked the button'); 
     } 
    } 
}); 

new Vue({ 
    el: '#app', 
}); 

// Pseudo code 
setInterval(() => { 
    // Third party library adds html: 
    var newContent = document.createElement('div'); 
    newContent.innerHTML = `<my-element inline-template :value="value"> 
    <button v-text="value" @click="click"></button> 
    </my-element>`; document.querySelector('.wrapper').appendChild(newContent) 

    //  
    // How would I now reinialize the app or 
    // the wrapping component to use the click handler and value? 
    // 

}, 5000) 

Answer 1

आगे की जांच के बाद मैं VueJs te तक पहुंचा हूँ और feedback कि निम्नलिखित दृष्टिकोण एक मान्य समाधान हो सकता है मिल गया:

/** 
* Content change handler 
*/ 
function handleContentChange() { 
    const inlineTemplates = document.querySelector('[inline-template]'); 
    for (var inlineTemplate of inlineTemplates) { 
    processNewElement(inlineTemplate); 
    } 
} 


/** 
* Tell vue to initialize a new element 
*/ 
function processNewElement(element) { 
    const vue = getClosestVueInstance(element); 
    new Vue({ 
    el: element, 
    data: vue.$data 
    }); 
} 

/** 
* Returns the __vue__ instance of the next element up the dom tree 
*/ 
function getClosestVueInstance(element) { 
    if (element) { 
    return element.__vue__ || getClosestVueInstance(element.parentElement); 
    } 
} 

आप आम तौर पर निम्नलिखित fiddle

Answer 2

में यह कोशिश कर सकते हैं जब मैं इस तरह सवाल सुनते हैं, वे हमेशा का उपयोग करके हल किया जा करने लगते हैं कुछ व्यू की अधिक अंतरंग और अस्पष्ट आंतरिक सुंदरता :)

मैंने कुछ तीसरे पक्ष के libs का उपयोग किया है जो 'डेटा के मालिक होने का आग्रह करते हैं', जिसे वे डीओएम को संशोधित करने के लिए उपयोग करते हैं - लेकिन यदि आप इन घटनाओं का उपयोग कर सकते हैं, तो आप किसी वू स्वामित्व वाली ऑब्जेक्ट में परिवर्तनों को प्रॉक्सी कर सकता है - या, यदि आपके पास कोई व्यय-स्वामित्व वाली वस्तु नहीं हो सकती है, तो आप कर सकते हैं गणना गुणों के माध्यम से एक स्वतंत्र डेटा संरचना का निरीक्षण करें।

window.someObjectINeedtoObserve = {...} 

yourLib.on('someEvent', (data) => { 
    // affect someObjectINeedtoObserve... 
}) 

new Vue ({ 
    // ... 
    computed: { 
    myObject() { 
     // object now observed and bound and the dom will react to changes 
     return window.someObjectINeedtoObserve 
    } 
    } 
}) 

यदि आप उपयोग के मामले और पुस्तकालयों को स्पष्ट कर सकते हैं, तो हम और अधिक मदद कर सकते हैं।