Question

我当前正在使用引导程序表组件来显示列表（bootstrap-table.com）

此组件（或包装在vue组件中的jQuery插件）为每一列都有一个格式化程序。

带有源代码：https://examples.bootstrap-table.com/#welcomes/vue-component.html#view-source

的示例

我需要构建一组更复杂的链接，其中涉及一些可以通过vue轻松完成的js处理。

我想返回<a>的内容，而不是格式化程序返回<component>标记。我已经尝试过了，但是还无法渲染组件。

我几乎可以肯定这是不可能的，因为子组件以前没有绑定，这意味着该组件不会“反应”。

或者，我可以构建一个js函数来生成所有必需的链接。

这个问题的另一个说法是：是否有可能从普通js生成vue组件？

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

使用香草JS

1 个答案: