Vue.js - 注入一个 v-on 按钮以从来自外部源的静态 html 生成覆盖

Question

使用 Axios，我正在拉入一个静态 HTML 文件。这部分正在工作

用户单击一个编辑按钮，我将浏览该静态 HTML，如果现有类存在，则添加一个新类。

如果现有的类存在，我想在这个静态 HTML 模板中添加一个带有 v-on 的新按钮，并在 HTML 中使用这个新按钮重新呈现内容，然后生成一个覆盖。

我是否可以在我的代码中添加这个新按钮，以便视图重新呈现并使用 Vue v-on 指令？

这是我的代码：

查看：

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

我知道我的一些变量在上面没有定义 - 我只是在寻找一个有助于解决这个问题的解决方案 - 基本上采用存储的 data.htmlData，解析它 - 找到带有“可编辑”的类并附加一个带有v-for 指令的按钮指向具有“可编辑”的特定节点......不幸的是，HTML 已经存在，现在我必须找到一种巧妙的方法来重新解析该 HTML 并将其重新附加到 Vue 模板.

Answer 1

我找到了 Vue 运行时模板，它运行良好！

https://alligator.io/vuejs/v-runtime-template/