VueJs Async loading templates

Question

I Am building my first VueJs App and I want to asynchronous load my template. In our framework we have our templates stored in a database, that's why. It is working until I have some nested dom-elements in my template without any data bound to it. So my my Vuejs is like:

var app = new Vue({
  el: '#app',
  data: {
    finish: false,
    template: null
  },
  render: function(createElement) {
    if (!this.template) {
      return createElement('div', 'loading...');
    } else {
      return this.template();
    }
  },
  mounted() {
    var self = this;
    $.post('myUrl', {foo:'bar'}, function(response){
      var tpl = response.data.template;
      self.template = Vue.compile(tpl).render;
    })
  }
})

This is working when my template is like:

<div v-show="!finish">
  <p>Test</p>
</div>

But when it's like this:

<div v-show="!finish">
  <p>
    <span>Test</span>    
  </p>
</div>

I get

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined" (found in < Root >)

But when it's like this:

<div v-show="!finish">
  <p v-show="!finish">
    <span>Test</span>    
  </p>
</div>

It's working again.

Can anyone explain what is happening here? And is this the right way to do it or should I do it an other way?

tony19 · Accepted Answer · 2022-07-16 03:45:38Z

0

My guess would be that you should try v-if instead of v-show. What v-show does is changing display property, vue is trying to render the element anyway.

docs

edited Jul 16, 2022 at 3:45

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 17, 2019 at 20:58

Kamil Bęben

1,1928 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs Async loading templates

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related