alexandersix
559
14
Vue

Vue says my property isn't defined, but I think it is...?

Posted 2 years ago by alexandersix

Ok, so I've hit a roadblock and was hoping someone here could lend a hand at figuring out what I'm missing!

I've installed a fresh install of Laravel 5.4 and I'm trying to just simply print out some data from the included VueJS instance in app.js (included below), but I keep getting the "property is referenced but not defined" error. Any chance someone sees my mistake? I think I've been staring at it for too long to find it!

Here's app.js

require('./bootstrap');
window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

var data = {
    blah: 'Hello World!',
}

const app = new Vue({
    el: '#app',
    data: data,
});

And here's app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    {{-- <link href="https://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet"> --}}
</head>
<body>
    <div>
        

        <div id="app">
            @yield('content')
        </div>
        
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    
    @yield('scripts')
</body>
</html>

And finally, here's my partial, people.blade.php:

@extends('layouts.app')

@section('content')
    <section class="hero is-info is-large">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">People: @{{ blah }}</h1>
            </div>
        </div>
    </section>

    <example></example>

    
@endsection

@section('scripts')
    <script>

    </script>
@endsection

One more thing to note--the instance is definitely being loaded, because the included Example.vue component works fine!

Thanks in advance for the help!

Please sign in or create an account to participate in this conversation.