У меня есть Vue #app, который отвечает за извлечение в контейнер внешних страниц PHP, загруженных через Ajax, с помощью Axios.
как то так:
new Vue({
el: '#app',
data: {
pageContent: ''
},
methods: {
runAjax() {
axios.get('/tmp/page.php').then(response => {
this.pageContent = response.data;
}
});
},
mounted() {
this.runAjax();
}
});
Тогда в HTML
<div id="app">
<div v-html="pageContent" class="ajax-wrapper"></div>
</div>
До сих пор он будет работать отлично, проблема в том, что содержимое Ajax, загруженное в '.ajax-wrapper', не будет восприниматься как часть Vue #app, так как его DOM не сразу загружается на первой странице загрузить, но позже вывести с помощью ajax.
В результате, если я определю событие click, который будет размещен на содержимом, загружаемом Ajax, что-то вроде: Foo ... директива v-on: click будет напечатана в разметка. Это признак того, что Vue #app не распознает его как собственный контент.
Итак, есть ли способ сообщить Vue, что когда он рендерит новый контент, он фактически распознает его как часть своего собственного #app?
Спасибо!