ChrisPercival's avatar

Help needed with Vue & Spark

Hi All

I am new to Laravel & I have started a project in Spark so I am learning as I go. It would be great if there was a series Spark as there seems to be a lot of interest for it.

Anyway have setup a test page in Spark so I can go through the Vue 2 series.

Below is the code for the page. I am not getting the 'helo world' message to show & if un commit the 'The value is: {{ message }}' I get the error message 'Use of undefined constant message - assumed 'message''

As Vue is part of the install I guess it should work. Anyway if someone can point me in the right direction I would be great full.

Code...

<title>@yield('title', config('app.name'))</title>

<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

<!-- CSS -->
<link href="/css/sweetalert.css" rel="stylesheet">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">

<!-- Scripts -->
@yield('scripts', '')

<!-- Global Spark Object -->
<script>
    window.Spark = <?php echo json_encode(array_merge(
        Spark::scriptVariables(), []
    )); ?>;
</script>

@if (Auth::check()) @include('spark::nav.user') @else @include('spark::nav.guest') @endif
    <div id="root">
        <input type="text" id="input" v-model="message">
    <!-- <p>The value is: {{ message }}</p> -->
    </div>
<!--    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> -->

    <script>
        let data = {
        message: 'helo world'
    };

    new Vue({
        el: '#root',
        data: data
    })
    </script>

    <!-- Main Content -->
    <!-- Application Level Modals -->
    @if (Auth::check())
        @include('spark::modals.notifications')
        @include('spark::modals.support')
        @include('spark::modals.session-expired')
    @endif
</div>

<!-- JavaScript -->
<script src="{{ mix('js/app.js') }}"></script>
<script src="/js/sweetalert.min.js"></script>
0 likes
0 replies

Please or to participate in this conversation.