我正在构建我的第一个 VueJs 应用程序,我想异步加载我的模板。在我们的框架中,我们将模板存储在数据库中,这就是原因。 它一直在工作,直到我的模板中有一些嵌套的 dom 元素,而没有任何数据绑定(bind)到它。所以我的 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 warn]: Error in render: "TypeError: Cannot read property '0' of undefined" (found in < Root >)
但是当它是这样的时候:
<div v-show="!finish">
<p v-show="!finish">
<span>Test</span>
</p>
</div>
它又可以工作了。
谁能解释一下这里发生了什么?这是正确的方法还是我应该采用其他方法?
最佳答案
我的猜测是您应该尝试 v-if
而不是 v-show
。 v-show
所做的是更改 display
属性,vue 无论如何都会尝试渲染该元素。
关于javascript - VueJs 异步加载模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48641037/