gpt4 book ai didi

javascript - 动态组件元素在 Vue.js 中不起作用

转载 作者:行者123 更新时间:2023-11-28 00:02:23 25 4
gpt4 key购买 nike

我遇到了一个让我生气的问题。我尝试制作一个动态组件但它不起作用。 Vue 检测到我的第一个和第二个组件,但没有检测到其他组件。

这是我的索引 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();

我在构建 build.js 或控制台时看不到任何有关 js 的错误警告。

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

app-header 和 app-footer 可以完美地使用它们作为元素,但其他组件不起作用。还有另一个包可以使用它们吗?

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

最佳答案

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

关于javascript - 动态组件元素在 Vue.js 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31675711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com