Используя Axios, я извлекаю статический HTML-файл.Эта часть работает
Пользователь нажимает кнопку редактирования, и я просматриваю этот статический HTML и добавляю новый класс, если существует существующий класс.
Если этот существующий класс существует, яхотите добавить новую кнопку с v-on в этот статический HTML-шаблон и повторно отрендерить содержимое с помощью этой новой кнопки в HTML, которая затем создает наложение.
В любом случае можно ли добавить эту новую кнопкув моем коде, так что представление повторно отображает и использует директиву Vue v-on?
Вот мой код:
VIEW:
<template>
<div>
<div class="row">
<div id="kbViewer">
<b-button
class="request-edit"
@click="letsEditThisStuff({currentUrl: currentUrl})">Request An Edit</b-button>
<div v-html="htmlData">
{{ htmlData }}
</div>
</div>
</div>
</div>
</template>
data: function () {
return {
sampleElement: '<button v-on="click: test()">test from sample element</button>',
htmlData: '',
};
},
methods: {
pullView: function (html) {
this.axios.get('../someurl/' + html).then(response => {
let corsHTML = response.data;
let htmlDoc = (new DOMParser()).parseFromString(corsHTML, "text/html");
this.rawDog = htmlDoc;
this.htmlData = htmlDoc.documentElement.getElementsByTagName('body')[0].innerHTML;
})
},
letsEditThisStuff(item) {
let htmlDoDa = this.htmlData;
// This doesn't work - I'm trying to loop over the code and find all
// of the class that are .editable and then add a class name of 'editing'
// to that new class. It works with #document of course...
for (const element of this.htmlData.querySelectorAll('.editable')) {
element.classList.add('editing');
// Now what I want to do here is add that sampleElement from above - or however -
// to this htmlData and then re-render it.
let textnode = document.createElement(sampleElement);
textnode.classList.add('request-the-edit')
textnode.innerHTML = 'edit me!'
element.append('<button v-on="click: test()">test from sample element</button>')
console.log('what is the element?', element)
}
this.htmlData = htmlDoDa
},
}
Iзнаю, что некоторые из моих переменных не определены выше - я только смотрю на решение, которое помогает с этим - в основном взять сохраненный data.htmlData, проанализировать его - найти классы с "редактируемыми" и добавить кнопку с v-for директива к этому конкретному узлу с «редактируемым» ... К сожалению, HTML уже существует, и теперь мне нужно найти удобный способ для повторного анализа этого HTML и повторного добавления его в шаблон Vue.