Rendering benutzerdefinierte verschachtelte HTML in Vue.js

Question

Ich bin eine Website von AngularJS 1.x, die stark auf die $ Kompilierdienst verlässt (die nicht mehr in Angular 2.x verfügbar ist. In der Anwendung habe ich eine Anweisung, dass sieht in etwa so <myDir elemId="someRestEndPointID"></myDir> und macht folgendes:

1) ein http Anruf getätigt wird und die Antwort gibt eine Zeichenfolge, die eine Richtlinie <myDir elemId="someRestEndPointID"></myDir>

2) ein Aufruf an den Server erfolgt enthält, die für/someRestEndPointID

3) Angular bekommt den Inhalt und rendert und schaut für einen anderen <myDir> Tag

4) der Prozess wird wiederholt (rekursiv)

haben noch fand ich nicht etwas, das dies für unsere neuen Rahmen tut Vue.js. Gibt es eine ähnliche Funktion oder Bibliothek, die diese Logik in Vue.js erreichen würde?

Answer 1

Das scheint wie eine komplizierte Art zu arbeiten, und ich würde diesem Muster nicht folgen. Warum nicht eine Komponente erstellen, die einen Endpunkt als Eigenschaft akzeptiert <your-component endpoint="https://example.org/"></your-component> und dann Komponente wird den Aufruf innerhalb der create Methode tun?

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