Vue.compile encounters issues with nested HTML elements exceeding two levels deep

Question

Vue.compile encounters issues with nested HTML elements exceeding two levels deep

When using Vue.compile to handle async HTML, it appears that there is a limit of two elements deep before encountering an error. Rendering anything deeper than that results in

Error in render: "TypeError: Cannot read property '0' of undefined"

.

For example,

<section><p>hello</p><section>

works fine but

<section><p>hello <em>there</em></p><section>

fails to render.

Check out the code example below and view the fiddle. (Asynchronously simulated by setTimeout)

new Vue({
  el: '#app',
  data: {
    msg: 'simple template works',
    template: Vue.compile('<p>{{msg}}</p>').render
  },
  render(createElement) {
    return this.template();
  },
  mounted() {
    // Note that the below snippet fails
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep <em>fails</em>?</p></div>').render;
    }, 1000);
    // This one renders correctly
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep fails?</p></div>').render;
    }, 2000);
  }
})

Does anyone know what might be causing this issue? Are 'complex' templates supposed to be compiled/rendered differently?

javascript vue.js compilation runtime

Answer 1

Answer №1

When you use Vue.compile, it returns an object that contains two essential properties for rendering a component correctly. The first property is "render," which serves as the main render function for the template. The second property is "staticRenderFns," a set of functions generated during compilation to optimize the rendering process by handling static content.

In certain instances where no static render functions are created during compilation, your code may still function without including them. However, in general, both properties are necessary for proper rendering.

Below is an updated version of your code that should work:

console.clear()

new Vue({
  el: '#app',
  data: {
    msg: 'simple template works',
    template: Vue.compile('<p>{{msg}}</p>')
  },
  render(createElement) {
    let msg = this.msg
    let base = {
      data(){
        return {
          msg
        }
      }
    }
    let component = Object.assign({}, this.template, base)
    return createElement(component);
  },
  mounted() {
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep <em>fails</em>?</p></div>');
    }, 1000);
    
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep fails?</p></div>');
    }, 2000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

For more information on Vue.compile, you can refer to the official documentation. Additionally, there is some documentation available here.

Linus Borg, a core team member of Vue, provides insights on staticRenderFns in this forum post:

Static Render Functions play a crucial role in optimizing the render process by caching static parts of the DOM tree. These functions cannot be updated or accessed during runtime but are essential components called by the render function when needed.

Answer 2

When you use Vue.compile, it returns an object that contains two essential properties for rendering a component correctly. The first property is "render," which serves as the main render function for the template. The second property is "staticRenderFns," a set of functions generated during compilation to optimize the rendering process by handling static content.

In certain instances where no static render functions are created during compilation, your code may still function without including them. However, in general, both properties are necessary for proper rendering.

Below is an updated version of your code that should work:

console.clear()

new Vue({
  el: '#app',
  data: {
    msg: 'simple template works',
    template: Vue.compile('<p>{{msg}}</p>')
  },
  render(createElement) {
    let msg = this.msg
    let base = {
      data(){
        return {
          msg
        }
      }
    }
    let component = Object.assign({}, this.template, base)
    return createElement(component);
  },
  mounted() {
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep <em>fails</em>?</p></div>');
    }, 1000);
    
    setTimeout(()=>{
      this.template = Vue.compile('<div><p>{{msg}}</p><p>Nesting more than three tags deep fails?</p></div>');
    }, 2000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

For more information on Vue.compile, you can refer to the official documentation. Additionally, there is some documentation available here.

Linus Borg, a core team member of Vue, provides insights on staticRenderFns in this forum post:

Static Render Functions play a crucial role in optimizing the render process by caching static parts of the DOM tree. These functions cannot be updated or accessed during runtime but are essential components called by the render function when needed.

Vue.compile encounters issues with nested HTML elements exceeding two levels deep

Answer №1

Similar questions

Having difficulty receiving a response from an AJAX call within the success function

What is the best way to display two array lists in JSON format and view them in data table rows using ASP.NET MVC?

Rendering EJS Template Views Dynamically Based on Conditions within the Same Path

Adjusting sort-icon properties in v-data-table does not produce the desired results

<FormattedMessage /> extract text from within tags

Organizing DIVs upon website initialization

After entering the author's name in the text box, I am attempting to showcase a quote, but inexplicably, nothing is appearing. What steps should I take to resolve this issue

Deactivated a specific radio button with a particular class attribute

Displaying particles in system

What could be the reason for the malfunctioning of the Angular options tracking by ID feature?

Tips for sending a Postgres Pool or Client over a socket

What are the steps to change the rendering order of Vue components in mobile view?

Sharing parameters between functions in JavaScript

Incorporating a new parameter into the JSON response from SoundCloud

Sorting complex functions in React with Javascript

Error message for Laravel Passport authentication failure

How to redirect from a method in Vue.js using Vue-router versions older than 1.x.x

How to open a hyperlink in a separate background tab with JavaScript or jQuery

Objects being collected as arrays of arrays in garbage collection

When trying to generate a list in Vue.js using Vuetify, an error occurred stating that it is best to steer clear of using a JavaScript keyword such as "v