2015-07-28 53 views
1

我遇到了一个让我发疯的问题。我尝试制作一个动态组件但它不起作用。 Vue检测到我的第一个和第二个组件,但它没有检测到其他组件。动态组件元素无法在Vue.js中工作

这是我的索引HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Kamuran Vue Test</title> 
</head> 
<body> 
    <app-header> 
</app-header> 
test 
    app-header 

    <app-header></app-header> 

    <component is="{{view}}"></component> 


    <app-footer></app-footer> 


    <app-form form="login"></app-form> 

</body> 
<script src="build.js"></script> 
</html> 

也是我main.js

var $ = require('jquery') 
var page = require('page') 
var Vue = require('vue') 

var vue = new Vue({ 
    el: 'html', 
    data: { 
    view: 'home' 
    }, 
    components: { 
    'app-footer' : require('./components/footer'), 
    'app-header' : require('./components/header'), 
    'app-form'  : require('./components/form'), 
    'home'   : require('./views/home'), 
    'login'  : require('./views/logins'), 
    'contact'  : require('./views/contact') 
    } 
}); 

page("*", function(ctx){ 
    if(ctx.path != "/"){ 
    vue.view = ctx.path.substr(1); 
    } else { 
    vue.view = "home" 
    } 

    console.log(vue.view) 

}); 
page(); 

我看不到任何错误警告有关JS作为构建build.js或控制台。

元素不起作用,即使我将它的值设置为app-header。

应用程序头和应用程序页脚完美地工作,因为使用它们的元素,但其他组件无法正常工作。是否有另一个工作包?

出了什么问题,我不明白。

回答

1

终于,我找到了答案。 当我构建“build.js”时,我使用了browserify。它造成了这个问题。 清除我的所有节点模块,并用webpack重新安装它们,然后重新构建js文件并解决问题。