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。
应用程序头和应用程序页脚完美地工作,因为使用它们的元素,但其他组件无法正常工作。是否有另一个工作包?
出了什么问题,我不明白。