May 4, 2017
0
Level 7
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>
Please or to participate in this conversation.