Question

我正在构建我的第一个VueJs应用程序，我想异步加载我的模板。在我们的框架中，我们将模板存储在数据库中，这就是原因。它一直工作，直到我的模板中有一些嵌套的dom元素，没有绑定任何数据。所以我的Vuejs就像：

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;
    })
  }
})

当我的模板如下时，这是有效的：

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

但是当它是这样的时候：

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

我得到了

[Vue警告]：渲染错误：＆＃34; TypeError：无法读取属性＆＃39; 0＆＃39;的未定义＆＃34; （在＆lt; Root＆gt;中找到）

但是当它是这样的时候：

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

它再次工作。

有人能解释这里发生了什么吗？这是正确的方法吗？或者我应该采取其他方式吗？

Answer 1

我的猜测是您应该尝试使用v-if而不是v-show。 v-show所做的是更改display属性，vue仍试图渲染该元素。

docs

VueJs异步加载模板

1 个答案: