Level 13
@alexandersix When template is rendered the data is not set. So this will not work <h1 class="title">People: @{{ blah }}</h1>.
Try
<h1 class="title" v-if="blah">People: @{{ blah }}</h1>
Jul 5, 2017
14
Level 6
Vue says my property isn't defined, but I think it is...?
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!
Level 6
@alenabdula Sadly that didn't do it. It DID hide the h1 though, so "blah" is coming back falsey.
Level 8
I don't think you're setting your data object correctly, you have to return it:
var data = {
blah: 'Hello World!',
}
const app = new Vue({
el: '#app',
data() {
return data,
}
});
Level 6
@jaydeluca That also didn't work, sadly. This isn't a Vue component, just a regular old instance of Vue, so I don't think data() is correct. I believe that you use data() only when you're creating a template, since the data has to be rendered dynamically as the component is rendered. Could very well be wrong about that though haha. Either way, still no dice. ?
Level 13
Data is an object on the main instance of Vue. Components data is a function that returns an object.
Maybe the error is coming from somewhere else. Following code should work.
var data = {
blah: 'Hello World!',
};
var app = new Vue({
el: '#app',
data: data,
});
Live example https://codepen.io/alenabdula/pen/jwprpX/
Level 6
@alenabdula Yeah, that's why I finally decided to come here and see if anyone had any ideas--I think it's something with the way that Laravel is handling it (not necessarily something that was written into the framework, most likely something that I've done wrong haha).
That code doesn't work for some reason, and I'm very not sure as to why.
If it's any help, I tried just taking the vue initialization out of app.js and putting the above code directly into my partial, but I'm still getting the same error: "Property or method "blah" is not defined on the instance but referenced during render..." etc, etc.
Level 47
use single file component
and i think data is a reserved word of vue , try changing to
var somedata = blah blah
Level 13
Data inside a Vue object is itself an object.
Read the Vue doc on how to construct the data object. You var data is Global to Javascript.
hint:
data: {
mydata: data
...
},
Level 6
@MaverickChan The word "data" can be used as a variable outside of the Vue instance from what I understand from the docs. Changing it had no effect.
@jimmick The data that I have inside my Vue object IS an object. I've tried instantiating it as an object outside the Vue instance and inside both as a global and local variable. I haven't found a working combination in that.
I really don't think it's a problem with the Vue install or anything, because I spun up a new Laravel install and got everything working right off the bat, so I'm not really sure what the problem was. I'll keep searching and post here if I find an answer.
Level 13
Has nothing to do with your Vue install. Your Javascript is wrong. The fact data is an object is irrelevant. The data object inside a Vue instance is also an object.
data: {
data: data
},
Level 6
@jimmck I tried that and it also didn't work. Also, for the past 3 or so Laravel/Vue projects that I've done, I've never had to put a data object as the value of the key "data" inside the Vue data object--I generally can just put my variables inside the Vue data object. I'm not sure if I'm understanding you correctly though.
Level 7
look in your vue dev tool, is the specified data (blah) exists ?
Level 5
const app = new Vue({
el: '#app',
data:{
variable: 'whatever'
}
});
<h1>@{{ variable }}</h1>
Level 6
@bunnypro Ah, I didn't even think to include that--yes, it IS showing up in my Vue Devtools with the correct key.
@vapenation We've already tried that.
Please or to participate in this conversation.