问题描述
I tried to use VueJS inline template component inside Laravel 5.7 but facing this error
This is my sample code on show.blade.php
@extends('layouts.app')
@section('content')
<div class="content">
<progress-view inline-template>
<h1>Test Inline Template Component</h1>
</progress-view>
</div>
@endsection
@section('js_after')
<script>
Vue.component('progress-view', {
data() {
return {};
},
});
</script>
@endsection
Default Laravel VueJS instance on app.js
const app = new Vue({
el: '#app'
});
How can I solve this problem? Do I need to register the component inside Laravel app.js? If yes, what is the syntax that I need?
Thanks
I finally found the solution to use VueJS inline template in Laravel.
Using this solution, you can enjoy the best of both world, you can use familiar Laravel blade syntax while keep your application reactive using VueJS.
This technique also covered in Laracast episode https://laracasts.com/series/lets-build-a-forum-with-laravel/episodes/32
Here is the complete step by step
<script>
export default {
mounted() {
console.log('inline template component');
},
data () {
return {
message: 'This is test message'
}
},
methods: {
store() {
alert('Test inline component method')
}
}
}
</script>
Vue.component('show-user-component', require('./components/admin/users/ShowUserComponent.vue'));
@extends('layouts.app')
@section('content')
<div class="content">
<show-user-component inline-template>
<div>
<h1>@lang('users.edit')</h1>
<input type="text" v-model="message">
<button @click="store" >Click</button>
</div>
</show-user-component>
</div>
@endsection
这篇关于Laravel VueJs 组件内联模板,未知自定义元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!