Генерация Vue Компонент с ванилью JS

Question

В настоящее время я использую табличный компонент bootstrap для отображения списка (bootstrap -table.com)

Этот компонент (или плагин jQuery, заключенный в компонент vue) имеет форматтер для каждого столбца.

пример с исходным кодом: https://examples.bootstrap-table.com/#welcomes / vue -component.html # view-source

Мне нужно создать более сложный набор ссылок, который включает некоторая обработка js, которую можно легко выполнить с помощью vue.

Вместо того, чтобы средство форматирования возвращало тег <a>, я хотел бы вернуть содержимое <component>. Я пробовал это, но не смог отобразить компонент.

Я почти уверен, что это невозможно, потому что дочерний компонент ранее не был связан, что означает, что компонент не будет "реактивным".

В качестве альтернативы я могу создать функцию js, которая генерирует все необходимые ссылки.

Еще один вопрос для этого вопроса: есть ли возможность сгенерировать компонент vue из ваниль js?

Answer 1

Вышеприведенное не было возможным, поскольку этот способ был опробован, поскольку компоненты не могут быть просто отображены как теги html, так как они могут иметь методы и вычисленные данные, поэтому они должны быть скомпилированы.

Похоже, что решение для В приведенной выше ситуации используется метод Vue.compile():

const template = `
<ul>
  <li v-for="item in items">
   {{ item }}
  </li>
</ul>`;

const compiledTemplate = Vue.compile(template);

new Vue({
  el: '#app',
  data() {
    return {
      items: ['Item1', 'Item2']
    }
  },
  render(createElement) {
    return compiledTemplate.render.call(this, createElement);
  }
});

Демо: https://codepen.io/couellet/pen/ZZNXzy

Демо-ссылка: https://snipcart.com/blog/vue-render-functions

Vue документы: https://vuejs.org/v2/api/#Vue -компиляция