VueJs satır içi şablonu manipüle ve

Question

bu soru VueJS re-compile HTML in an inline-template component benzer ve aynı zamanda Maalesef bu soruya çözüm $compile gibi güncel VueJS uygulanması için artık kullanılamaz

How to make Vue js directive working in an appended html element kaldırıldı etmektir yeniden başlatmak.

Benim kullanım durumu şudur:

Ben sayfasını yöneten ve sonrasında bir etkinliği tetikleyen üçüncü şahıs kodu kullanmak zorunda. Şimdi bu olaydan sonra VueJS'in mevcut DOM'yi yeniden başlatması gerektiğini bilmesini istiyorum.

(saf javascript ile yazılmış üçüncü parti bir kullanıcının sayfaya yeni widget'lar eklemek için izin verir)

https://jsfiddle.net/5y8c0u2k/

HTML

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

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

Daha fazla araştırmadan sonra VueJs te benim ve şu yaklaşımı geçerli bir çözüm olabilir feedback var:

/** 
* 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); 
    } 
} 

Benim bu gibi sorular duyduğunda, her zaman kullanılarak çözülebilir görünüyor Genellikle aşağıdaki fiddle

Answer 2

bunu deneyebilirsiniz Vue'nin daha samimi ve gizlenmiş iç güzelliğinin bir kısmı :)

DOM'u değiştirmek için kullandıkları "veriye sahip olmakta ısrar eden" birkaç üçüncü parti libe kullandım. Ancak bu etkinlikleri kullanabiliyorsanız Vue'ya ait bir nesneye yapılan değişiklikleri bildirebilir veya vue sahipliğindeki bir nesneye sahip olamazsanız Hesaplanmış özellikler üzerinden bağımsız bir veri yapısı gözlemlemek.

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

Kullanım durumunu ve kitaplıklarını netleştirebilirseniz, daha fazla yardımcı olabiliriz.