VueJS组件注册
我创建了一个全局组件，我想在我的代码中快速测试它。但是VueJS抱怨组件没有注册。我想当我创建像下面这样的组件时，这个应该已经工作了吗？
我使用BULMA框架进行测试，并复制和粘贴了我想测试的组件。因此，在HTML代码中，我将使用：
<div id="app">
<message title="Hello world" body="test"></message>
</div>我得到的错误是：
未知自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。
Vue.component('message', {
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
<p>{{title}}</p>
<button class="delete"></button>
</div>
<div class="message-body">
{{body}}
</div>
</article>`
});
var app = new Vue({
el: '#app',
data: {
responders: [],
incidents: []
},
mounted: function () {
this.getIncidents();
},
methods: { (...)https://jsfiddle.net/2re6qv6h/#&togetherjs=BnB0KhQdLU
更新
代码嵌入到我的laravel代码中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDIFAKTOR - @yield('title') </title>
<link rel="stylesheet" href="css/vendor.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
@include('layouts.navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
@include('layouts.topnavbar')
<!-- Main view -->
<div id="app">
<my-message title="Hello world" body="test"></my-message>
</div>
<!-- Footer -->
@include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
@section('scripts')
@show
</body>
<script src="js/app.js" type="text/javascript"></script>
</html>完整的VueJS代码
Vue.component('my-message', {
props: ['title', 'body'],
data() {
return {
isVisible: true
};
},
template: `
<article class="my-message" v-show="true">
<div class="message-header">
<p>{{title}}</p>
<button type="button" @click="hideModal">x</button>
</div>
<div class="message-body">
{{body}}
</div>
</article>`,
methods: {
hideModal() {
this.isVisible = false;
}
}
});
var app = new Vue({
el: '#app',
data: {
responders: [],
incidents: []
},
mounted: function () {
this.getIncidents();
},
methods: {
getIncidents: function() {
console.log('getIncidents');
var self = this;
this.$http.get('/api/v1/incidents').then(function(response) {
// set data on vm
console.log(response.data);
var incidentsReceived = response.data.data.map(function (incident) {
return incident;
});
Vue.set(self, 'incidents', incidentsReceived);
});
}
}
});回答 3
Stack Overflow用户
发布于 2017-02-07 08:13:29
尝试将文章的类名<article class="message">更改为<article class="my-message">
Stack Overflow用户
发布于 2017-08-07 14:05:33
根据您正在使用的Laravel版本，它已经带有Vue烘焙，并将其直接附加到窗口。我的猜测是，您的应用程序正在运行，Vue引用正在被Laravel实例覆盖，在该实例中，您没有注册组件。要确定，请删除html中的底部脚本标记<script src="js/app.js" type="text/javascript"></script>。
同样，看起来您正在注册您的组件很好。如果有的话，您可以将is=""属性添加到组件中，以显式地告诉它是哪个组件。如果您称它为“我的消息”，这有点多余，但它确实为人们提供了一些明确的信息，即它是一个Vue组件。最终，这将取决于你和你的团队的离题。
Stack Overflow用户
发布于 2018-11-23 16:25:34
在浏览了几个小时之后，我终于发现问题在于Chrome没有更新app.js文件。在浏览器中进行硬刷新，这样就可以消除错误。如果你这么想的话，试试完全禁用浏览器缓存吧。
https://stackoverflow.com/questions/42084577
复制相似问题
腾讯云开发者
