在 Vue.js 中呈现自定义嵌套 html

Question

我正在从 AngularJS 1.x 移动一个严重依赖 $compile 服务的站点（在 Angular 2.x 中不再可用。在我有一个看起来像这样的指令的应用程序 <myDir elemId="someRestEndPointID"></myDir> 并执行以下操作：

1) 进行了一个 http 调用，响应 returns 一个包含指令 <myDir elemId="someRestEndPointID"></myDir>

的字符串

2) 调用服务器以获取 /someRestEndPointID

3) Angular 获取内容并呈现并寻找另一个 <myDir> 标签

4) 过程重复（递归）

我还没有找到可以为我们的新框架执行此操作的东西 Vue.js。在 Vue.js 中是否有类似的功能或库可以实现此逻辑？

Answer 1

这似乎是一种复杂的工作方式，我不会遵循这种模式。为什么不创建一个将端点作为属性 <your-component endpoint="https://example.org/"></your-component> 的组件，然后组件将在 create 方法中进行调用？

<template>
  <div>
    <img src="loading.jpg" v-show="loading" />
    <!-- Content here -->
    {{content}}
  </div>
</template>

<script>

  export default {
   props: ['endpoint'],
   data() {
    return {
      loading: true,
      content: null
    };
  },
  created() {
    this.$http.get(this.endpoint).then(resp => {
      this.content = resp.body;
      this.loading = false;
    });
   }
  }
</script>

在 Vue.js 中呈现自定义嵌套 html

Rendering custom nested html in Vue.js

javascript

angularjs

angularjs-directive

vue.js