VueJS组件未加载
VueJS组件未加载
提问于 2018-01-23 15:08:44
我有以下vuejs组件。我知道这是一个非常简单的例子，但它仍然不能正确加载。下面是我的代码：
Vue.component('my-component', {
template: '<div>{{ msg }}</div>',
data: {
msg: 'hello'
}
});
new Vue({
el: '#app-6'
});<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>
<body>
<div id="app-6">
test
<my-component></my-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
</body>
</html>
有什么建议吗?我哪里做错了？
感谢您的回复！
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-23 15:24:46
数据必须始终是一个函数
var data={msg: 'hello'}
Vue.component('my-component', {
template: '<div>{{ msg }}</div>',
data:function() {
return data;
}
});
new Vue({
el: '#app-6'
});<!DOCTYPE html>
<html lang="en">
<meta>
<meta charset="UTF-8">
<title>Components in Vue.js</title>
</meta>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<div id="app-6">
test
<my-component></my-component>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-01-23 15:21:28
您的数据应该是如下所示的函数：
data () {
return {
msg: 'Hello'
}
}更多信息请点击此处：https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
Stack Overflow用户
发布于 2018-01-23 15:33:55
你应该这样做。
Vue.component('my-component', {
template: '<div>{{ msg }}</div>',
data: function () {
return {
msg: 'Hello'
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48395984
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号