Creating unique and personalized nested HTML structures in Vue.js

Question

Creating unique and personalized nested HTML structures in Vue.js

As I migrate a website from AngularJS 1.x to Angular 2.x, I am faced with the challenge of replacing the $compile service which is no longer supported. In the current application, there is a directive that resembles

<myDir elemId="someRestEndPointID"></myDir>

and it performs the following tasks:

1) An HTTP request is made and the response includes a string containing the directive

<myDir elemId="someRestEndPointID"></myDir>

2) A server call is initiated for /someRestEndPointID

3) Angular processes the content, renders it, and searches for another <myDir> tag

4) This process repeats recursively

I am currently exploring how to achieve similar functionality in our new Vue.js framework. Can anyone recommend a feature or library that can replicate this behavior in Vue.js?

javascript angularjs angularjs-directive vue.js

Answer 1

Answer №1

It appears to be a complex approach and not one that I would recommend following. Instead of this method, why not consider creating a component that accepts an endpoint as a property like

<your-component endpoint="https://example.org/"></your-component>

? This way, the component can handle the API call within the create method.

<template>
  <div>
    <img src="loading.jpg" v-show="loading" />
    <!-- Your content goes 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>

Answer 2

It appears to be a complex approach and not one that I would recommend following. Instead of this method, why not consider creating a component that accepts an endpoint as a property like

<your-component endpoint="https://example.org/"></your-component>

? This way, the component can handle the API call within the create method.

<template>
  <div>
    <img src="loading.jpg" v-show="loading" />
    <!-- Your content goes 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>

Creating unique and personalized nested HTML structures in Vue.js

Answer №1

Similar questions

Steps for assigning distinct identifiers to information entered through an input form

Retrieve an item from an array based on the unique ID value of the button that was clicked using

Troubleshoot: React and Laravel login authentication issues

Testing the AngularJS directive using Jasmine for unit testing

Access information with the help of navigate in the React framework

Tips for incorporating a pop-up feature into your flexslider

React Native - The size of the placeholder dictates the height of a multiline input box

Error: Mongoose is unable to create a function within a sub-document

What is the most effective method for integrating an HTML template into AngularJS without using an iframe?

Javascript code for identifying objects in an array with specific properties and values

Bootstrap side navigation bars are an essential tool for creating

The Quickest Way to Retrieve Attribute Values in JavaScript

Activate the enter key functionality with the help of knockout and a JavaScript function

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

Prevent the opening of tabs in selenium using Node.js

Generating landscapes through block-based procedural methods

Issue: [$injector:unpr] Unfamiliar supplier: musicServiceProvider <- musicService <- MusicController

Can parameters be effectively passed to the $.change() method in any way?

The Icecast json-status.xls file is returning an invalid JSON response with a blank song title

Is it possible to enhance an external class with a non-static method using prototypes?