本文介绍了Laravel VueJs 组件内联模板,未知自定义元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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 组件内联模板,未知自定义元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 06:22
查看更多