Rendering custom nested html in Vue.js

Question

I'm moving a site from AngularJS 1.x that relies heavily on the $compile service (which is no longer available in Angular 2.x. In the application I have a directive that looks something like this <myDir elemId="someRestEndPointID"></myDir> and does the following:

1) A http call is made and the response returns a string that contains a directive <myDir elemId="someRestEndPointID"></myDir>

2) A call is made to the server to for /someRestEndPointID

3) Angular gets the content and renders and looks for another <myDir> tag

4) the process is repeated (recursive)

I have not yet found something that does this for our new framework Vue.js. Is there a similar feature or library that would achieve this logic in Vue.js?

Answer 1

That seems like a convoluted way to work and I wouldn't follow that pattern. Why not create a component that takes an endpoint as a property <your-component endpoint="https://example.org/"></your-component> and then component will do the call inside the create method?

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