1
コード内ですばやくテストしたいグローバルコンポーネントを作成しました。しかし、VueJSはコンポーネントが登録されていないと不平を言う。私は以下のようなコンポーネントを作成すると、これはすでに機能するはずだと思いましたか？VueJSコンポーネント登録
私はBULMA CSSフレームワークのテストに使用し、テストしたいコンポーネントを貼り付けた&コピーしました。だから私が使用する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);
});
}
}
});
「記事」は何ですか、これはどのように定義されていますか、それを再生するフィドルを作成することは可能ですか？ – Saurabh
私の質問が更新されました。それはBULMA CSSフレームワークのテスト用に使用されているコンポーネントです – sesc360
同じJSファイル内のグローバルコンポーネントであってもなぜコンポーネントが認識されないのだろうかと疑問に思うのですが、 – sesc360